欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3实现毛玻璃效果_html/css_WEB-ITnose

程序员文章站 2022-03-08 19:44:04
...
**首先看效果**

**引入下题**

HTML:

CSS3实现毛玻璃效果_html/css_WEB-ITnose

CSS3:

#blur{filter:blur(10px);-webkit-filter:blur(10px);-moz-filter:blur(10px);-ms-filter:blur(10px);-o-filter:blur(10px);}

**看个复杂点的例子**

查看演示

结 合CSS3毛玻璃实现 微信版的发红包看完整照片效果。可以完美的兼容移动端与PC端。代码如下:

html:

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  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();