CSS3实现毛玻璃效果_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS3实现毛玻璃效果_html/css_WEB-ITnose,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3238字,纯文字阅读大概需要5分钟。
内容图文
![CSS3实现毛玻璃效果_html/css_WEB-ITnose](/upload/InfoBanner/zyjiaocheng/405/c46c95125d1c4411a56dbf37b2fa3b3f.jpg)
**引入下题**
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:
resetshow
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 = "";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);}
查看演示
知识点:
- h5头部别忘引入viewport:
- filter : blur CSS3默认的滤镜模糊效果。
- canvas绘制图片,drawImage();
- canvas arc(); 用canvas绘制圆形;
- canvas clip(); 剪切区域;
- setinterval(); 与 clearInterval();
内容总结
以上是互联网集市为您收集整理的CSS3实现毛玻璃效果_html/css_WEB-ITnose全部内容,希望文章能够帮你解决CSS3实现毛玻璃效果_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。