Canvas打开红包获得流量动画特效

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

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

以下是 Canvas打开红包获得流量动画特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas打开红包获得流量动画特效</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="js/mathlib-min.js"></script>
<script src="js/k3d-min.js"></script>
<script src="js/radiation.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body style="background-color: rgba(0,0,0,0);overflow:hidden;">
<canvas id="canvas" style="position: relative; background-color: #fed261;"></canvas>
<div class="container" id="container">
	<div class="RedBox">
		<div class="topcontent">
			<h2 class="bounceInDown">恭喜你获得流量</h2>
			<span class="text flash"><b>50</b>M</span>
			<div class="avatar">
				<div id="open"><img src="images/user8.jpg" alt="" width="80" height="80" class="zoomIn"></div>
			</div>
			<div class="description1 flipInX">查看红包记录</div>
			<div class="description2">查看红包</div>
		</div>
	</div>
</div>
<script>
	var oOpen = document.getElementById("open");
	var oClose = document.getElementById("open");
	var oContainer = document.getElementById("container");

	oChai.onclick = function (){
		oChai.setAttribute("class", "rotate");
	};
</script>
</body>
</html>

JS代码(radiation.js):

// ����ҳ����ش���window.addEventListener('load',onloadHandler,false);
	// ҳ����ش���function onloadHandler(){
	var canvas = document.getElementById('canvas');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	var k3dmain = new K3D.Controller(canvas,true);
	// ���ҳ����Ⱦѭ���ص����� var ctx = canvas.getContext('2d');
	var rotationOffset = 0;
	var len = (canvas.height > canvas.width ? canvas.height:canvas.width) * 0.7;
	k3dmain.clearBackground = false;
	k3dmain.callback = function(){
	// ������� ctx.clearRect(0,0,canvas.width,canvas.height);
	// ����3dЧ�� ctx.save();
	ctx.translate(canvas.width/2,canvas.height/2);
	ctx.rotate(rotationOffset);
	// ���Ʒ����� var RAYCOUNT = 24;
	ctx.fillStyle = "#fdd971";
	ctx.beginPath();
	for (var i=0;
	i<RAYCOUNT;
	i++){
	ctx.rotate(TWOPI / RAYCOUNT);
	ctx.moveTo(0,0);
	ctx.lineTo(-20,len);
	ctx.lineTo(20,len);
}
ctx.closePath();
	ctx.fill();
	ctx.fillStyle = "#fdd971";
	//���÷�������ɫ ctx.beginPath();
	for (var i=0;
	i<RAYCOUNT;
	i++){
	// ���������� ctx.rotate(TWOPI / RAYCOUNT);
	ctx.moveTo(0,0);
	ctx.lineTo(-15,len);
	ctx.lineTo(15,len);
}
ctx.closePath();
	ctx.fill();
	ctx.restore();
	rotationOffset += 0.005;
	// ת�������� for (var i=0,objs=k3dmain.objects;
	i<objs.length;
	i++){
	objs[i].ophi += targetRotationX;
}
if (targetRotationX > -0.5) targetRotationX -= 0.05;
	else if (targetRotationX < -0.55) targetRotationX += 0.05;
	if (targetRotationX > -0.55 && targetRotationX < -0.5) targetRotationX = -0.5;
}
;
	// ѭ��ת�� k3dmain.paused = true;
	setInterval(function(){
	k3dmain.tick()}
,1000/60);
}
var targetRotationX = 0;

CSS代码(style.css):

*{margin:0;padding:0;box-sizing:border-box;}
canvas{display:inline-block;vertical-align:baseline;}
html{color:#fff;font-size:14px;}
.container{text-align:center;width:100%;max-width:960px;margin:0 auto;padding:15px 5px;background-color:rgba(0,0,0,0);height:100%;position:absolute;z-index:1;top:0;-webkit-transform:scale(1);transform:scale(1);opacity:0;-webkit-animation:fromBack 1s linear forwards;animation:fromBack 1s linear forwards;}
@-webkit-keyframes fromBack{0%{transform:scale(0);opacity:0;}
100%{transform:scale(1);opacity:1;}
}
@keyframes fromBack{0%{transform:scale(0);opacity:0;}
100%{transform:scale(1);opacity:1;}
}
.RedBox{height:450px;background-color:#ff605e;width:300px;left:0;top:0;border-radius:10px;margin:0 auto;border-radius:50% 50% 10px 10px / 15% 15% 10px 10px;box-shadow:inset 0 4px 0 -1px rgba(0,0,0,0.2);}
.topcontent{height:280px;background-image:url("../images/red_02.png");-webkit-background-size:contain;background-size:contain;background-repeat:no-repeat;}
.avatar{position:relative;}
.topcontent img{border:1px solid #BD503A;border-radius:50%;overflow:hidden;margin-top:15%;-webkit-animation-duration:5s;animation-duration:5s;}
.topcontent h2{margin:5px 0;padding-top:100px;color:#fed261;-webkit-animation-duration:3s;animation-duration:3s;}
.text{color:#ff605e;;font-weight:bold;font-size:1.5rem;-webkit-animation-duration:4s;animation-duration:4s;}
.text b{font-size:2rem;}
.description1{margin:40px 50px;font-size:16px;font-weight:600;height:34px;background:#fff;color:#ff605e;line-height:34px;border-radius:5px;-webkit-animation-duration:4s;animation-duration:4s;}
.description2{margin:10px 50px;font-size:16px;font-weight:600;}
.rotate{-webkit-animation:anim .6s infinite alternate;-ms-animation:anim .6s infinite alternate;animation:anim .6s infinite alternate;}
@-webkit-keyframes anim{from{-webkit-transform:rotateY(180deg);}
to{-webkit-transform:rotateY(360deg);}
}
@-ms-keyframes anim{from{-ms-transform:rotateY(180deg);}
to{-ms-transform:rotateY(360deg);}
}
@keyframes anim{from{transform:rotateY(180deg);}
to{transform:rotateY(360deg);}
}
@-webkit-keyframes bounceInDown{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);}
0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0);}
60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0);}
75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0);}
90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0);}
to{-webkit-transform:none;transform:none;}
}
@keyframes bounceInDown{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);}
0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0);}
60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0);}
75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0);}
90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0);}
to{-webkit-transform:none;transform:none;}
}
.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown;}
@-webkit-keyframes flash{from,0%,to{opacity:0;}
100%{opacity:1;}
}
@keyframes flash{from,0%,to{opacity:0;}
100%{opacity:1;}
}
.flash{-webkit-animation-name:flash;animation-name:flash;}
@-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.2,.2,.2);transform:scale3d(.2,.2,.2);}
50%{opacity:1;}
}
@keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.2,.2,.2);transform:scale3d(.2,.2,.2);}
50%{opacity:1;}
}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;}
@-webkit-keyframes flipInX{from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;}
40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;}
60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1;}
80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg);}
to{-webkit-transform:perspective(400px);transform:perspective(400px);}
}
@keyframes flipInX{from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;}
40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;}
60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1;}
80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg);}
to{-webkit-transform:perspective(400px);transform:perspective(400px);}
}
.flipInX{-webkit-backface-visibility:visible !important;backface-visibility:visible !important;-webkit-animation-name:flipInX;animation-name:flipInX;}

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