超炫的動畫就要開始了哦７氤恕入录！
往下看
愛心跳動：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
width: 100%;
margin: 0;
overflow: hidden;
}
canvas{
display:block;
}
</style>
</head>
<body>
<canvas id='canv'></canvas>
<script>
var c = document.getElementById('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 = Math.cos(rnd1),
rnd1s = Math.sin(rnd1),
rnd2c = Math.cos(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);//放大最大數(shù)值
/*線性漸變*/
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;
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: http://en.wikipedia.org/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.requestAnimationFrame = window.requestAnimationFrame||
window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var run = function() {
window.requestAnimationFrame(run);
go();
}
run();
</script>
</body>
</html>
星空閃爍：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>情人節(jié)心跳動動畫</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 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.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的運用凡桥。
愿你能夠成為前端大神。
