html5微信朋友圈红包看照片特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5微信朋友圈红包看照片特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5微信朋友圈红包看照片特效</title>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
</head>
<body>
<div class="demo-blur-main">
	<img class="demo-blur-img" src="img/demo.jpg"/>
	<canvas id="demo-canvas"></canvas>
	<a href="javascript:reset()" class="button" id="button-reset">RESET</a>
	<a href="javascript:show()" class="button" id="button-show">SHOW</a>
</div>
<script src="js/demo.js" type="text/javascript"></script>
</body>
</html>

JS代码(demo.js):

///////////////////////////////////////////////////////////////////////// //// 微博：唐明明Fight //// /////////////////////////////////////////////////////////////////////////var canvasWidth = 640;
	var canvasHeight = 400;
	var canvas = document.getElementById("demo-canvas");
	var context = canvas.getContext("2d");
	canvas.width = canvasWidth;
	canvas.height = canvasHeight;
	var image = new Image();
	var radius = 50;
	image.src = "img/demo.jpg";
	image.onload = function(e){
	initCanvas();
}
function initCanvas(){
	Region ={
	x:Math.random()*(canvas.width-2*radius)+radius,y:Math.random()*(canvas.height-2*radius)+radius,r:radius}
draw(image,Region);
}
function setRegion(Region){
	context.beginPath();
	context.arc(Region.x,Region.y,Region.r,0,Math.PI*2,false);
	context.clip();
}
function draw(image){
	context.clearRect(0,0,canvas.width,canvas.height);
	context.save();
	setRegion(Region);
	context.drawImage(image,0,0);
	context.restore();
}
function reset(){
	initCanvas();
}
function show(){
	var animation = setInterval(function(){
	//console.log("animation");
	Region.r += 20;
	if(Region.r > 2*Math.max(canvas.width,canvas.height)){
	clearInterval(animation);
}
draw(image,Region);
}
,30);
}

CSS代码(demo.css):

/*-------------------------------------------------------------------*/
/* */
/* 微博：唐明明Fight */
/* */
/*-------------------------------------------------------------------*/
body{padding:0;margin:0;}
.width{width:640px;}
.height{height:400px;}
.margin{margin:200px auto 0;}
.position-abs-0{position:absolute;top:0;left:0;}
.demo-blur-main{position:relative;width:640px;height:400px;margin:200px auto 0;}
.demo-blur-main .demo-blur-img{width:640px;height:400px;display:block;filter:blur(20px);-webkit-filter:blur(20px);-ms-filter:blur(20px);-moz-filter:blur(20px);position:absolute;top:0;left:0;z-index:0;}
.demo-blur-main #demo-canvas{display:block;margin:0 auto;z-index:99;position:absolute;top:0;left:0;}
.demo-blur-main .button{position:absolute;display:block;width:100px;line-height:30px;text-align:center;border-radius:5px;font-family:arial;color:#fff;text-decoration:none;z-index:999;}
.demo-blur-main #button-reset{left:20%;bottom:30px;background-color:#ff5555;}
.demo-blur-main #button-reset:hover{background-color:#ff9090;}
.demo-blur-main #button-show{right:20%;bottom:30px;background-color:#5f5bff;}
.demo-blur-main #button-show:hover{background-color:#9d9bff;}
/*# sourceMappingURL=demo.css.map */

附件:下载该文件资源,减少时间成本(增值服务)