第一种：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>????</title>
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
animation: anim 1.5s ease-in-out infinite;
-webkit-animation: anim 1.5s ease-in-out infinite;
-o-animation: anim 1.5s ease-in-out infinite;
-moz-animation: anim 1.5s ease-in-out infinite;
}
#name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: -20px;
font-size: 30px;
color: #ea80b0;
}
@keyframes anim {
0% {
transform: scale(0.8);
}
25% {
transform: scale(0.7);
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.7);
}
100% {
transform: scale(0.8);
}
}
@-webkit-keyframes anim {
0% {
-webkit-transform: scale(0.8);
}
25% {
-webkit-transform: scale(0.7);
}
50% {
-webkit-transform: scale(1);
}
75% {
-webkit-transform: scale(0.7);
}
100% {
-webkit-transform: scale(0.8);
}
}
@-o-keyframes anim {
0% {
-o-transform: scale(0.8);
}
25% {
-o-transform: scale(0.7);
}
50% {
-o-transform: scale(1);
}
75% {
-o-transform: scale(0.7);
}
100% {
-o-transform: scale(0.8);
}
}
@-moz-keyframes anim {
0% {
-moz-transform: scale(0.8);
}
25% {
-moz-transform: scale(0.7);
}
50% {
-moz-transform: scale(1);
}
75% {
-moz-transform: scale(0.7);
}
100% {
-moz-transform: scale(0.8);
}
}
</style>
</head>
<body>
<canvas ></canvas>
<!-- 添加名字 --><center>
<div style="color: blue;" >
xxx<br>
I Love You
</center>
</div>
<script>
var settings = {
particles: {
length: 500,
duration: 2,
velocity: 100,
effect: -0.75,
size: 30,
},
};
(function () {
var b = 0;
var c = ["ms", "moz", "webkit", "o"];
for (var a = 0; a < && !; ++a) {
= window[c[a] + "RequestAnimationFrame"];
=
window[c[a] + "CancelAnimationFrame"] ||
window[c[a] + "CancelRequestAnimationFrame"];
}
if (!) {
= function (h, e) {
var d = new Date().getTime();
var f = (0, 16 - (d - b));
var g = (function () {
h(d + f);
}, f);
b = d + f;
return g;
};
}
if (!) {
= function (d) {
clearTimeout(d);
};
}
})();
var Point = (function () {
function Point(x, y) {
= typeof x !== "undefined" ? x : 0;
= typeof y !== "undefined" ? y : 0;
}
= function () {
return new Point(, );
};
= function (length) {
if (typeof length == "undefined")
return ( * + * );
();
*= length;
*= length;
return this;
};
= function () {
var length = ();
/= length;
/= length;
return this;
};
return Point;
})();
var Particle = (function () {
function Particle() {
= new Point();
= new Point();
= new Point();
= 0;
}
= function (x, y, dx, dy) {
= x;
= y;
= dx;
= dy;
= dx * ;
= dy * ;
= 0;
};
= function (deltaTime) {
+= * deltaTime;
+= * deltaTime;
+= * deltaTime;
+= * deltaTime;
+= deltaTime;
};
= function (context, image) {
function ease(t) {
return --t * t * t + 1;
}
var size = * ease( / );
= 1 - / ;
(
image,
- size / 2,
- size / 2,
size,
size
);
};
return Particle;
})();
var ParticlePool = (function () {
var particles,
firstActive = 0,
firstFree = 0,
duration = ;
function ParticlePool(length) {
particles = new Array(length);
for (var i = 0; i < ; i++)
particles[i] = new Particle();
}
= function (x, y, dx, dy) {
particles[firstFree].initialize(x, y, dx, dy);
firstFree++;
if (firstFree == ) firstFree = 0;
if (firstActive == firstFree) firstActive++;
if (firstActive == ) firstActive = 0;
};
= function (deltaTime) {
var i;
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].update(deltaTime);
}
if (firstFree < firstActive) {
for (i = firstActive; i < ; i++)
particles[i].update(deltaTime);
for (i = 0; i < firstFree; i++) particles[i].update(deltaTime);
}
while (
particles[firstActive].age >= duration &&
firstActive != firstFree
) {
firstActive++;
if (firstActive == ) firstActive = 0;
}
};
= function (context, image) {
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].draw(context, image);
}
if (firstFree < firstActive) {
for (i = firstActive; i < ; i++)
particles[i].draw(context, image);
for (i = 0; i < firstFree; i++) particles[i].draw(context, image);
}
};
return ParticlePool;
})();
(function (canvas) {
var context = ("2d"),
particles = new ParticlePool(),
particleRate =
/ ,
time;
function pointOnHeart(t) {
return new Point(
160 * ((t), 3),
130 * (t) -
50 * (2 * t) -
20 * (3 * t) -
10 * (4 * t) +
25
);
}
var image = (function () {
var canvas = ("canvas"),
context = ("2d");
= ;
= ;
function to(t) {
var point = pointOnHeart(t);
=
/ 2 +
( * ) / 350;
=
/ 2 -
( * ) / 350;
return point;
}
();
var t = -;
var point = to(t);
(, );
while (t < ) {
t += 0.01;
point = to(t);
(, );
}
();
= "#ea80b0";
();
var image = new Image();
= ();
return image;
})();
function render() {
requestAnimationFrame(render);
var newTime = new Date().getTime() / 1000,
deltaTime = newTime - (time || newTime);
time = newTime;
(0, 0, , );
var amount = particleRate * deltaTime;
for (var i = 0; i < amount; i++) {
var pos = pointOnHeart( - 2 * * ());
var dir = ().length();
(
/ 2 + ,
/ 2 - ,
,
-
);
}
(deltaTime);
(context, image);
}
function onResize() {
= ;
= ;
}
= onResize;
setTimeout(function () {
onResize();
render();
}, 10);
})(("pinkboard"));
</script>
</body>
</html>
第二种
代码如下：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=””>
<META NAME=”Keywords” CONTENT=””>
<META NAME=”Description” CONTENT=””>
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</HEAD>
<BODY>
<canvas ></canvas>
<script>
var settings = {
particles: {
length: 500, // maximum amount of particles
duration: 2, // particle duration in sec
velocity: 100, // particle velocity in pixels/sec
effect: -0.75, // play with this for a nice effect
size: 30, // particle size in pixels
},
};
(function () { var b = 0; var c = ["ms","moz","webkit","o"]; for (var a = 0; a < && !; ++a) { = window[c[a] +"RequestAnimationFrame"]; = window[c[a] +"CancelAnimationFrame"]|| window[c[a] +"CancelRequestAnimationFrame"] } if (!) { = function (h, e) { var d = new Date().getTime(); var f = (0, 16 - (d - b)); var g = (function () { h(d + f) }, f); b = d + f; return g } } if (!) { = function (d) { clearTimeout(d) } } }());
var Point = (function () {
function Point(x, y) {
= (typeof x !== "undefined") ?x: 0;
= (typeof y !== "undefined") ?y: 0;
}
= function () {
return new Point(, );
};
= function (length) {
if (typeof length == "undefined")
return ( * + * );
();
*= length;
*= length;
return this;
};
= function () {
var length = ();
/= length;
/= length;
return this;
};
return Point;
})();
var Particle = (function () {
function Particle() {
= new Point();
= new Point();
= new Point();
= 0;
}
= function (x, y, dx, dy) {
= x;
= y;
= dx;
= dy;
= dx * ;
= dy * ;
= 0;
};
= function (deltaTime) {
+= * deltaTime;
+= * deltaTime;
+= * deltaTime;
+= * deltaTime;
+= deltaTime;
};
= function (context, image) {
function ease(t) {
return (-t) * t * t + 1;
}
var size = * ease( / );
= 1 - / ;
(image, - size / 2, - size / 2, size, size);
};
return Particle;
})();
var ParticlePool = (function () {
var particles,
firstActive = 0,
firstFree = 0,
duration = ;
function ParticlePool(length) {
particles = new Array(length);
for (var i = 0; i < ; i++)
particles[i] = new Particle();
}
= function (x, y, dx, dy) {
particles[firstFree].initialize(x, y, dx, dy);
firstFree++;
if (firstFree == ) firstFree = 0;
if (firstActive == firstFree) firstActive++;
if (firstActive == ) firstActive = 0;
};
= function (deltaTime) {
var i;
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].update(deltaTime);
}
if (firstFree < firstActive) {
for (i = firstActive; i < ; i++)
particles[i].update(deltaTime);
for (i = 0; i < firstFree; i++)
particles[i].update(deltaTime);
}
while (particles[firstActive].age >= duration && firstActive != firstFree) {
firstActive++;
if (firstActive == ) firstActive = 0;
}
};
= function (context, image) {
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].draw(context, image);
}
if (firstFree < firstActive) {
for (i = firstActive; i < ; i++)
particles[i].draw(context, image);
for (i = 0; i < firstFree; i++)
particles[i].draw(context, image);
}
};
return ParticlePool;
})();
(function (canvas) {
var context = ("2d"),
particles = new ParticlePool(),
particleRate = / , // particles/sec
time;
function pointOnHeart(t) {
return new Point(
160 * ((t), 3),
130 * (t) - 50 * (2 * t) - 20 * (3 * t) - 10 * (4 * t) + 25
);
}
var image = (function () {
var canvas = ("canvas"),
context = ("2d");
= ;
= ;
function to(t) {
var point = pointOnHeart(t);
= / 2 + * / 350;
= / 2 - * / 350;
return point;
}
();
var t = -;
var point = to(t);
(, );
while (t < ) {
t += 0.01; // baby steps!
point = to(t);
(, );
}
();
= "#ea80b0";
();
var image = new Image();
= ();
return image;
})();
function render() {
requestAnimationFrame(render);
var newTime = new Date().getTime() / 1000,
deltaTime = newTime - (time || newTime);
time = newTime;
(0, 0, , );
var amount = particleRate * deltaTime;
for (var i = 0; i < amount; i++) {
var pos = pointOnHeart( - 2 * * ());
var dir = ().length();
( / 2 + , / 2 - , , -);
}
(deltaTime);
(context, image);
}
function onResize() {
= ;
= ;
}
= onResize;
setTimeout(function () {
onResize();
render();
}, 10);
})(("pinkboard"));
</script>
</BODY>
</HTML>
第三种
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱心跳动效果</title>
<style>
* {
margin: 0;
padding: 0;
}
.loveBox {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: rgb(36, 40, 66);
}
.loveLine {
height: 200px;
}
.loveLine li {
float: left;
list-style: none;
width: 20px;
height: 20px;
border-radius: 10px;
margin-right: 10px;
}
.loveLine li:nth-child(1) {
background-color: red;
animation: jump1 3s infinite;
}
.loveLine li:nth-child(2) {
background-color: rgb(238, 118, 5);
animation: jump2 3s 0.2s infinite;
}
.loveLine li:nth-child(3) {
background-color: rgb(106, 10, 233);
animation: jump3 3s 0.4s infinite;
}
.loveLine li:nth-child(4) {
background-color: darkmagenta;
animation: jump4 3s 0.6s infinite;
}
.loveLine li:nth-child(5) {
background-color: rgb(245, 11, 147);
animation: jump5 3s 0.8s infinite;
}
.loveLine li:nth-child(6) {
background-color: rgb(32, 9, 231);
animation: jump4 3s 1.0s infinite;
}
.loveLine li:nth-child(7) {
background-color: rgb(36, 170, 81);
animation: jump3 3s 1.2s infinite;
}
.loveLine li:nth-child(8) {
background-color: #f62e74;
animation: jump2 3s 1.4s infinite;
}
.loveLine li:nth-child(9) {
background-color: red;
animation: jump1 3s 1.6s infinite;
}
@keyframes jump1 {
30%,
50% {
height: 60px;
transform: translateY(-30px);
}
70%,
100% {
height: 20px;
transform: translateY(0px);
}
}
@keyframes jump2 {
30%,
50% {
height: 120px;
transform: translateY(-60px);
}
70%,
100% {
height: 20px;
transform: translateY(0px);
}
}
@keyframes jump3 {
30%,
50% {
height: 160px;
transform: translateY(-75px);
}
70%,
100% {
height: 20px;
transform: translateY(0px);
}
}
@keyframes jump4 {
30%,
50% {
height: 180px;
transform: translateY(-60px);
}
70%,
100% {
height: 20px;
transform: translateY(0px);
}
}
@keyframes jump5 {
30%,
50% {
height: 200px;
transform: translateY(-45px);
}
70%,
100% {
height: 20px;
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="loveBox">
<ul class="loveLine">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
