欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。 网站托管 桌面收藏 网站定制

361源码网

当前位置:361源码网 > 技术文档 > 程序代码 > 用CSS3毛玻璃效果实现微信发红包看照片
这篇文章主要为大家详细介绍了用CSS3毛玻璃效果实现微信发红包看照片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

前面361源码给大家介绍过《CSS3实现图片的毛玻璃视觉效果》,那么这的效果到底能有什么样的应用呢?今天361源码就接着给大家介绍用CSS3毛玻璃效果实现微信发红包看照片效果,这个效果可以完美的兼容PC和移动WAP端。

代码如下:

HTML代码部分:

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

CSS代码:

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}

JS代码:

<script>
var canWidth = 600;
var canHeight = 400;
var canvas=document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = canWidth;
canvas.height = canHeight;
var img = new Image();
img.src = "picture/blur.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);
}
</script>

整体实现效果如下图:

用CSS3毛玻璃效果实现微信发红包看照片

应用此代码需要注意的要点有

  1.h5头部别忘引入viewport:

<meta name=”viewport” content=”init-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,width=device-width”>

  2.实现此效果还需要引入jquery.min.js文件。

  3.filter : blur CSS3默认的滤镜模糊效果。

  4.canvas绘制图片,drawImage();

  5.canvas arc(); 用canvas绘制圆形;

  6.canvas clip(); 剪切区域;

  7.setinterval(); clearInterval();


效果演示参看

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: CSS3 毛玻璃 微信红包

上一篇融合新浪IP库和搜狐IP库获取访客IP地址和IP归属地信息并无刷新显示

下一篇php 判断复选框checkbox是否被选中

延伸阅读

《用CSS3毛玻璃效果实现微信发红包看照片》期待您的评论!

大牛,别默默的看了,快来点评一下吧!:)。
取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在