CSS3实现毛玻璃(图片模糊)效果

分类栏目:用户体验 - 前端开发

17053

发布于 14 条评论

**首先看效果**

back

**引入下题**

HTML:

<img id="blur" src="img/back.jpg">

CSS3:

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

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

查看演示

QQ图片20160225150950

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

html:

<div id="content">
<!--模糊图片-->
<img id="blur" src="img/4.jpg">
<!--使用canvas绘制图片-->
<canvas id="canvas"></canvas>
<a href="javascript:reset()" rel="external nofollow"  class="button" id="button-reset">reset</a>
<a href="javascript:show()" rel="external nofollow"  class="button" id="button-show">show</a>
</div>

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

查看演示

知识点:

  • h5头部别忘引入viewport:
    <meta name=”viewport” content=”init-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,width=device-width”>
  • filter : blur CSS3默认的滤镜模糊效果。
  • canvas绘制图片,drawImage();
  • canvas arc();  用canvas绘制圆形;
  • canvas clip(); 剪切区域;
  • setinterval();  与 clearInterval();

全部评论 / 14

  1. 若水

    好棒的朦胧美 :oops:

    若水 2016-02-26
    3
  2. 若水

    :wink:

    若水 2016-02-26
    2
  3. Javin

    演示效果不错,赞32个! :wink: :wink: :wink:

    1号 Javin zhong 2016-02-26
    1
    1. 军儿

      请问管理员,我之前里边没有查看演示,是咱们这给加上的吗?

      军儿 2016-02-26
      1. Javin

        是网站这边人员给加上的。建议以后技术文章可以提供下demo,会让人更加有动力去学习哦。
        感谢您的文章给小站带来光彩。棒棒哒!

        1号 Javin zhong 2016-02-26
        1. 军儿

          本来想提供demo呢,可是demo案例上传到哪呢?demo演示地址咱们这可以提供演示的路径么?

          军儿 2016-02-26
      2. Javin

        如果提供demo麻烦,只要文章内有比较完整的代码,我们这边也是可以帮你补上demo演示的。

        1号 Javin zhong 2016-02-26
      3. Javin

        demo案例上传,现在暂时还没这个功能,后续会优化这点。
        现在的方案一个可以提供demo的链接,另外在文章中提供较完整的代码(css、html、js等等)即可。

        1号 Javin zhong 2016-02-26
        1. 军儿

          我现在的文章代码就是比较详细的,但是为什么没有用我的代码做为DEMO呢?而是用了一个不是我的作品作为demo呢,我感觉你们这种演示DEMO的做法很好,但应该保持原创的代码作为demo演示,而不是你们给作者添加东西。

          谨个人意见,忘采纳!

          军儿 2016-02-26
      4. Javin

        demo里面的代码完全是按照您的代码编写的,唯一的改动是我这边修改了您的图片地址,文章中的是src=”img/4.jpg”,这样子是无法在demo中显示的,所以我这边就替换了一个可访问的图片地址。如果你介意这点,可以提供文中的图片文件(或链接)给我,我会将你的图片替换上去。

        1号 Javin zhong 2016-02-26
        1. 军儿

          像这种图片如果涉及到维权问题怎么办呢?我还是建议把图片给换回来吧,我怎么给你发图片呢?

          军儿 2016-02-26
        2. Javin

          你可以编辑你的这篇文章,然后上传图片,然后将上传后的图片地址复制到文章中。也可以发给QQ: 89408658 帮助你处理。

          1号 Javin zhong 2016-02-26
      5. Javin

        已解决,感谢建议和关注。

        1号 Javin zhong 2016-02-26
        1. 军儿

          :oops: 谢谢,小编很用心。

          军儿 2016-02-26