php 毛玻璃,CSS3实现毛玻璃(图片模糊)效果
摘要:CSS3实现毛玻璃(图片模糊)效果..
**首先看效果**
**引入下题**
HTML:
CSS3:#blur{
filter:blur(10px);
-webkit-filter:blur(10px);
-moz-filter:blur(10px);
-ms-filter:blur(10px);
-o-filter:blur(10px);
}
结合CSS3毛玻璃实现微信版的发红包看完整照片效果。可以完美的兼容移动端与PC端。代码如下:
html:
reset
show
css3:body,html{margin:0;padding:0;overflow:hidden}
#content{position:relative;margin:0 auto;overflow:hidden}
#blur{position:absolute;margin:0 auto;left:0;top:0;filter:blur(10px);-webkit-filter:blur(18px);-moz-filter:blur(18px);-ms-filter:blur(18px);-o-filter:blur(18px);z-index:0;display:block}
#canvas{position:absolute;margin:0 auto;left:0;top:0;z-index:1;display:block}
.button{padding:5px 10px;color:#fff;position:absolute;display:block;text-align:center;border-radius:4px;text-decoration:none;z-index:3}
#button-reset{left:10%;bottom:5%;background-color:red}
#button-show{right:10%;bottom:5%;background-color:green}
javascript:var canWidth = window.innerWidth-20;
var canHeight = window.innerHeight-20;
var canvas=document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = canWidth;
canvas.height = canHeight;
var img = new Image();
img.src = "img/4.jpg";
var radius = 50;
var leftMargin = 0,topMargin = 0;
img.onload = function(){
//初始化父容器的宽高使窗口与canvas宽高相同
$("#content").css({"width":canvas.width + "px","height":canvas.height + "px"});
//模糊图片与canva中绘制的图片(隐藏的清楚图片)宽高相同,别忘加px,否则计算出来的只是个值,不带px
$("#blur").css("width",img.width + "px");
$("#blur").css("height",img.height + "px");
//左边距:(图片宽高 - canvas宽高) / 2;等于一边的边距宽高
leftMargin = (img.width - canvas.width)/2;
topMargin = (img.height - canvas.height)/2;
//模糊图片的上边距与左边距
$("#blur").css("top", String(-topMargin) + "px");
$("#blur").css("left", String(-leftMargin) + "px");
initCanvas();
}
function initCanvas(){
var theleft = leftMargin < 0 ? -leftMargin : 0;
var thetop = topMargin < 0 ? -topMargin : 0;
//创建圆
region = {x:Math.random() * (canvas.width-2 * radius - 2 * theleft) + radius + theleft,
y:Math.random() * (canvas.height-2 * radius - 2 * thetop) + radius + thetop, r : radius};
draw(img,region);
}
function draw(img){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
setRegion(region);
/*绘制清楚图片,如leftMargin<0那么取0,
图片宽度与canvas宽度哪个最小取哪个值*/
ctx.drawImage(img, Math.max(leftMargin,0), Math.max(topMargin,0),
Math.min(canvas.width,img.width), Math.min(canvas.height,img.height),
leftMargin < 0 ? -leftMargin : 0, topMargin < 0 ? -topMargin : 0,
Math.min(canvas.width,img.width),Math.min(canvas.height,img.height));
ctx.restore();
}
function setRegion(region){
ctx.beginPath();
ctx.arc(region.x,region.y,region.r,0,Math.PI * 2,false);
//进行裁减圆
ctx.clip();
}
function reset(){
initCanvas();
}
function show(){
var animation = setInterval(function(){
region.r += 20;
if(region.r > Math.max(canvas.width,canvas.height)){
clearInterval(animation);
}
draw(img,region);
},30);
}
php 毛玻璃,CSS3实现毛玻璃(图片模糊)效果相关推荐
- html中怎样制作图片滚动,CSS3 制作的图片滚动效果
实现效果 实现代码 html CSS3 @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { ...
- CSS3配合JavaScript图片爆炸效果
CSS3配合JavaScript实现图片爆炸效果 先看看效果图: 代码如下: boom.html <!DOCTYPE html> <html lang="en"& ...
- 使用 CSS3 实现 3D 图片滑块效果
Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...
- html图片爆炸效果,利用CSS3制作3D图片爆炸效果
利用css3 transform和transition样式制作点击图片时 图片爆炸开并切换到下一张图片依次循环 首先先看一下效果图 Paste_Image.png 先描述一下大概思路: 布局时外面有一 ...
- 纯CSS3实现GIF图片动画效果
在线演示 本地下载
- css3加载图片淡入效果
代码如下: <!DOCTYPE html> <html> <head><title></title><meta charset=&qu ...
- css3鼠标悬停图片抖动效果
提供一个参考的链接 http://demo.lanrenzhijia.com/2015/pic0113/ 转载于:https://www.cnblogs.com/w1991/p/7054131.htm ...
- CSS3 实现六边形图片展示效果
代码片 下面展示一些 内联代码片. // html <div class="boxF"><div class="boxS"><di ...
- github unity 图片切换效果_CSS3图片模糊切换效果
今天我们来分享一款利用CSS3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用CSS3实现图片模糊效果也非常简单,用CSS3中的filter属性即可,针对不同浏览器用- ...
最新文章
- PHP高级教程——Zend Framework核心开发人员力作
- Sublime如何设置背景透明
- 编程语言python入门要电脑什么配置能带动-Python是万能的编程语言吗?这五大用途很重要!...
- 【sprinb-boot】maven 多模块项目:单独 spring-boot:run 某个模块
- 从Windows XP升级? 这是您需要了解的Windows 7
- Asp.Net Core 5 REST API 使用 JWT 身份验证 - Step by Step(二)
- Hazelcast入门指南第5部分
- Axure通用版电商后台管理系统+通用版移动端商城商户端+电商管理系统+对账管理+消息管理+内容管理+运营管理、会员管理、订单管理、促销管理、财务管理+通用版商城前后端电商系统+电商用户数据大屏看板
- Pandas入门教程(五)
- jquery修改样式通过css方法
- 有赞大裁员:裁员会超过1500人,加盟4年半的百度副总裁也已离职
- java 4级_《软件测试人员(Java)(4级)》【价格 目录 书评 正版】_中国图书网
- java poi读取word内容
- 解决VMware卸载后再安装出现的问题
- homeassistant 快速入门
- 三级等保 mysql8.0.24密码策略设置
- idea的tools下面没有deployment选项
- mysql中工资表,( 13 ) 数据库中有工资表 , 包括 “ 姓名 ” 、 “ 工资 ” 和 “ 职称 ” 等字段 , 现要对不同职称的职 - 赏学吧...
- GPT-4——比GPT-3强100倍
- OpenCV face_detector人脸识别报错