摘要：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实现毛玻璃（图片模糊）效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。