HTML爱⼼跳动和超炫Canvas星空闪烁实现超炫的动画就要开始了哦！！
**往下看**
星空闪烁：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
width:100%;
margin:0;
overflow: hidden;
html frame}
canvas{
display:block;
}
</style>
</head>
<body>
<canvas id='canv'></canvas>
<script>
var c = ElementById('canv');//获取canvas的Id
var $ = c.getContext('2d');/*设置绘制⽅式*/
var u =0;
var go=function(){
var sc, g, g1, i, j, p, x, y, z, w, a, cur,
d =new Date()/1000,
rnd =shift(),
rnd1 = d,
rnd2 =2.4,
rnd3 = d *0.2,
rnd1c = s(rnd1),
rnd1s = Math.sin(rnd1),
rnd2c = s(rnd2),
rnd2s = Math.sin(rnd2);
c.width = window.innerWidth;
c.height = window.innerHeight;
sc = Math.max(c.width, c.height);
$.translate(c.width *0.5, c.height *0.5);//从中⼼开始绘制
$.scale(sc, sc);//放⼤最⼤数值
/*线性渐变*/
g = $.createLinearGradient(-1,-2,1,2);
g.addColorStop(0.0,'hsla(338, 95%, 25%, 1)');
g.addColorStop(0.5,'hsla(260, 95%, 5%, 1)');
g.addColorStop(1.0,'hsla(338, 95%, 30%, 1)');
$.fillStyle = g;//颜⾊
$.fillRect(-0.5,-0.5,1,1);
$.globalCompositeOperation ='lighter';
$.rotate(rnd3 % Math.PI*2);/*旋转*/
for(i =0; i <300; i +=1){
p =rnd();
x =(p &0xff)/128-1;
y =(p >>>8&0xff)/128-1;
z =(p >>>16&0xff)/128-1;
w =(p >>>24&0xff)/256;
z += d *0.5;
z =(z +1)%2-1;
a =(z +1)*0.5;
a =(z +1)*0.5;
if(a <0.9){
$.globalAlpha = a /0.7;
}else{
a -=0.9;
$.globalAlpha =1- a /0.1;
}
cur = x * rnd1c + y * rnd1s;
y = x * rnd1s - y * rnd1c;
x = cur;
cur = y * rnd2c + z * rnd2s;
z = y * rnd2s - z * rnd2c;
y = cur;
z -=0.65;
if(z >=0){
continue;
}
sc =0.1/ z;
x *= sc;
y *= sc;
$.save();
g1 = $.createRadialGradient(1,1,2,1,1,1);
g1.addColorStop(0.0,'hsla('+i+', 70%, 40%,.8)');
g1.addColorStop(0.5,'hsla('+i+', 75%, 50%, 1)');
g1.addColorStop(1.0,'hsla('+i+', 80%, 60%, .8)');
$.fillStyle = g1;
$.translate(x, y);
$.scale(sc *0.017, sc *0.017);
$.beginPath();
$.moveTo(2,0);
for(j =0; j <10; j +=1){
$.rotate(Math.PI*2*0.1);
$.lineTo(j %2+1,0);
}
$.arc(10,10,1,0, Math.PI*2);
$.rotate(Math.PI*2*0.1);
$.closePath();
$.fill();
$.restore();
}
};
/*
Marsaglia's Xorshift128 PRG: /wiki/Xorshift
*/
var shift=function(x, y, z, w){
x = x ||1234567;
y = y ||362436069;
z = z ||521288629;
w = w ||88675123;
return function(){
var s = x ^(x <<11);
x = y;
y = z;
z = w;
w =(w ^(w >>>19))^(s ^(s >>>8));
return w;
};
}
window.addEventListener('resize',function(){
c.width = window.innerWidth;
c.height = window.innerHeight;
},false);
window.msRequestAnimationFrame;
var run=function(){
go();
}
run();
</script>
</body>
</html>
爱⼼跳动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>情⼈节⼼跳动动画</title>
<style type="text/css">
html, body{
width:100%;
height:100%;
min-width:500px;
min-height:500px;
overflow: hidden;
}
.heart {
position: absolute;
width:100px;
height:90px;
top:50%;
left:50%;
margin-top:-45px;
margin-left:-50px;
}
.heart:before,
.heart:after {
position: absolute;
content:"";
left:50px;
top:0;
width:50px;
height:80px;
background: #fc2e5a;
border-radius:50px 50px 00;
transform:rotate(-45deg);
transform-origin:0100%;
}
.heart:after {
left:0;
transform:rotate(45deg);
transform-origin :100%100%;
}
.heart1{
animation: heart-anim 1s linear .4s infinite;
}
.
heart2{
animation: pounding .5s linear infinite alternate;
}
.heart1:after,.heart1:before{
background-color: #ff7693;
}
@keyframes pounding{
0%{ transform:scale(1.5);}
100%{ transform:scale(1);}
}
}
@keyframes heart-anim {
46%{
transform:scale(1);
}
50%{
transform:scale(1.3);
}
52%{
transform:scale(1.5);
}
55%{
transform:scale(3);
}
100%{
opacity:0;
transform:scale(50);
}
}
</style>
</head>
<body>
<!--外圈⼤⼼-->
<div class="heart heart1"></div>
<!--⾥⾯⼩⼼-->
<div class="heart heart2"></div>
</body>
<script type="text/javascript">
</script>
</html>
多多揣摩源码，熟练掌握HTML，Css，JS的运⽤。愿你能够成为前端⼤神。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。