最近电视剧《点燃我温暖你》的火热播出，剧中学霸男主李珣的炫酷爱心代码也迅速活出了圈，作为一个爱动手实践的我来说，已经把代码打完了。
也欢迎大家一起来开发更好看的样式或者动态效果吧！
网页效果：
HTML运行之后的网页效果图源代码：
!
DOCTYPE
HTML
PUBLIC
"-//W3C//DTDHTML4.0Transitional//EN"
HTML
HEAD
TITLE
Love
/
TITLE
META
NAME
=
"Generator"
CONTENT
=
"EditPlus"
META
NAME
=
"Author"
CONTENT
=
""
META
NAME
=
"Keywords"
CONTENT
=
""
META
NAME
=
"Description"
CONTENT
=
""
style
html
,
body
{
height
:
%
;
padding
:
;
margin
:
;
background
:
#
;
}
canvas
{
position
:
absolute
;
width
:
%
;
height
:
%
;
}
/
style
style
type
=
"text/css"
div
{
color
:
#ea80b0
;
font-size
:
5rem
;
font-family
:STXingkai;
/*text-shadow:pxplum,pxplum,pxplum,pxplum;*/
}
.box
{
position
:
absolute
;
top
:
50%
;
left
:
35%
;
-webkit-transform
:
translateY
(
-50%
);
-ms-transform
:
translateY
(
-50%
);
-o-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
);
}
/
style
/
HEAD
BODY
canvas
id
=
"pinkboard"
/
canvas
script
/*
*Settings
*/
var
settings
={
particles
:
{
length
:
,
//maximumamountofparticles
duration
:
2
,
//particledurationinsec
velocity
:
,
//particlevelocityinpixels/sec
effect
:
-
0.75
,
//playwiththisforaniceeffect
size
:
30
,
//particlesizeinpixels
},
};
/*
*RequestAnimationFramepolyfillbyErikMller
*/
(
function
(){
var
b
=
;
var
c
=[
"ms"
,
"moz"
,
"webkit"
,
"o"
];
for
(
var
a
=
;
a
c
.
length
!
window
.
requestAnimationFrame
;++
a
){
window
.
requestAnimationFrame
=
window
[
c
[
a
]+
"RequestAnimationFrame"
];
window
.
cancelAnimationFrame
=
window
[
c
[
a
]+
"CancelAnimationFrame"
]
window
[
c
[
a
]+
"CancelRequestAnimationFrame"
]}
if
(!
window
.
requestAnimationFrame
){
window
.
requestAnimationFrame
=
function
(
h
,
e
){
var
d
=
new
Date
().
getTime
();
var
f
=
Math
.
max
(
,
16
-(
d
-
b
));
var
g
=
window
.
setTimeout
(
function
(){
h
(
d
+
f
)},
f
);
b
=
d
+
f
;
return
g
}}
if
(!
window
.
cancelAnimationFrame
){
window
.
cancelAnimationFrame
=
function
(
d
){
clearTimeout
(
d
)}}}());
/*
*Pointclass
*/
var
Point
=(
function
(){
function
Point
(
x
,
y
){
this
.
x
=(
typeof
x
!==
undefined
)?
x
:
;
this
.
y
=(
typeof
y
!==
undefined
)?
y
:
;
}
Point
.
prototype
.
clone
=
function
(){
return
new
Point
(
this
.
x
,
this
.
y
);
};
Point
.
prototype
.
length
=
function
(
length
){
if
(
typeof
length
==
undefined
)
return
Math
.
sqrt
(
this
.
x
*
this
.
x
+
this
.
y
*
this
.
y
);
this
.
normalize
();
this
.
x
*=
length
;
this
.
y
*=
length
;
return
this
;
};
Point
.
prototype
.
normalize
=
function
(){
var
length
=
this
.
length
();
this
.
x
/=
length
;
this
.
y
/=
length
;
return
this
;
};
return
Point
;
})();
/*
*Particleclass
*/
var
Particle
=(
function
(){
function
Particle
(){
this
.
position
=
new
Point
();
this
.
velocity
=
new
Point
();
this
.
acceleration
=
new
Point
();
this
.
age
=
;
}
Particle
.
prototype
.
initialize
=
function
(
x
,
y
,
dx
,
dy
){
this
.
position
.
x
=
x
;
this
.
position
.
y
=
y
;
this
.
velocity
.
x
=
dx
;
this
.
velocity
.
y
=
dy
;
this
.
acceleration
.
x
=
dx
*
settings
.
particles
.
effect
;
this
.
acceleration
.
y
=
dy
*
settings
.
particles
.
effect
;
this
.
age
=
;
};
Particle
.
prototype
.
update
=
function
(
deltaTime
){
this
.
position
.
x
+=
this
.
velocity
.
x
*
deltaTime
;
this
.
position
.
y
+=
this
.
velocity
.
y
*
deltaTime
;
this
.
velocity
.
x
+=
this
.
acceleration
.
x
*
deltaTime
;
this
.
velocity
.
y
+=
this
.
acceleration
.
y
*
deltaTime
;
this
.
age
+=
deltaTime
;
};
Particle
.
prototype
.
draw
=
function
(
context
,
image
){
function
ease
(
t
){
return
(--
t
)*
t
*
t
+
1
;
}
var
size
=
image
.
width
*
ease
(
this
.
age
/
settings
.
particles
.
duration
);
context
.
globalAlpha
=
1
-
this
.
age
/
settings
.
particles
.
duration
;
context
.
drawImage
(
image
,
this
.
position
.
x
-
size
/
2
,
this
.
position
.
y
-
size
/
2
,
size
,
size
);
};
return
Particle
;
})();
/*
*ParticlePoolclass
*/
var
ParticlePool
=(
function
(){
var
particles
,
firstActive
=
,
firstFree
=
,
duration
=
settings
.
particles
.
duration
;
function
ParticlePool
(
length
){
//createandpopulateparticlepool
particles
=
new
Array
(
length
);
for
(
var
i
=
;
i
particles
.
length
;
i
++)
particles
[
i
]=
new
Particle
();
}
ParticlePool
.
prototype
.
add
=
function
(
x
,
y
,
dx
,
dy
){
particles
[
firstFree
].
initialize
(
x
,
y
,
dx
,
dy
);
//handlecircularqueue
firstFree
++;
if
(
firstFree
==
particles
.
length
)
firstFree
=
;
if
(
firstActive
==
firstFree
)
firstActive
++;
if
(
firstActive
==
particles
.
length
)
firstActive
=
;
};
ParticlePool
.
prototype
.
update
=
function
(
deltaTime
){
var
i
;
//updateactiveparticles
if
(
firstActive
firstFree
){
for
(
i
=
firstActive
;
i
firstFree
;
i
++)
particles
[
i
].
update
(
deltaTime
);
}
if
(
firstFree
firstActive
){
for
(
i
=
firstActive
;
i
particles
.
length
;
i
++)
particles
[
i
].
update
(
deltaTime
);
for
(
i
=
;
i
firstFree
;
i
++)
particles
[
i
].
update
(
deltaTime
);
}
//removeinactiveparticles
while
(
particles
[
firstActive
].
age
=
duration
firstActive
!=
firstFree
){
firstActive
++;
if
(
firstActive
==
particles
.
length
)
firstActive
=
;
}
};
ParticlePool
.
prototype
.
draw
=
function
(
context
,
image
){
//drawactiveparticles
if
(
firstActive
firstFree
){
for
(
i
=
firstActive
;
i
firstFree
;
i
++)
particles
[
i
].
draw
(
context
,
image
);
}
if
(
firstFree
firstActive
){
for
(
i
=
firstActive
;
i
particles
.
length
;
i
++)
particles
[
i
].
draw
(
context
,
image
);
for
(
i
=
;
i
firstFree
;
i
++)
particles
[
i
].
draw
(
context
,
image
);
}
};
return
ParticlePool
;
})();
/*
*Puttingitalltogether
*/
(
function
(
canvas
){
var
context
=
canvas
.
getContext
(
2d
),
particles
=
new
ParticlePool
(
settings
.
particles
.
length
),
particleRate
=
settings
.
particles
.
length
/
settings
.
particles
.
duration
,
//particles/sec
time
;
//getpointonheartwith-PI=t=PI
function
pointOnHeart
(
t
){
return
new
Point
(
*
Math
.
pow
(
Math
.
sin
(
t
),
3
),
*
Math
.
cos
(
t
)-
50
*
Math
.
cos
(
2
*
t
)-
20
*
Math
.
cos
(
3
*
t
)-
10
*
Math
.
cos
(
4
*
t
)+
25
);
}
//creatingtheparticleimageusingadummycanvas
var
image
=(
function
(){
var
canvas
=
document
.
createElement
(
canvas
),
context
=
canvas
.
getContext
(
2d
);
canvas
.
width
=
settings
.
particles
.
size
;
canvas
.
height
=
settings
.
particles
.
size
;
//helperfunctiontocreatethepath
function
to
(
t
){
var
point
=
pointOnHeart
(
t
);
point
.
x
=
settings
.
particles
.
size
/
2
+
point
.
x
*
settings
.
particles
.
size
/
;
point
.
y
=
settings
.
particles
.
size
/
2
-
point
.
y
*
settings
.
particles
.
size
/
;
return
point
;
}
//createthepath
context
.
beginPath
();
var
t
=-
Math
.
PI
;
var
point
=
to
(
t
);
context
.
moveTo
(
point
.
x
,
point
.
y
);
while
(
t
Math
.
PI
){
t
+=
0.01
;
//babysteps!
point
=
to
(
t
);
context
.
lineTo
(
point
.
x
,
point
.
y
);
}
context
.
closePath
();
//createthefill
context
.
fillStyle
=
#ea80b0
;
context
.
fill
();
//createtheimage
var
image
=
new
Image
();
image
.
src
=
canvas
.
toDataURL
();
return
image
;
})();
//renderthatthing!
function
render
(){
//nextanimationframe
requestAnimationFrame
(
render
);
//updatetime
var
newTime
=
new
Date
().
getTime
()/
0
,
deltaTime
=
newTime
-(
time
newTime
);
time
=
newTime
;
//clearcanvas
context
.
clearRect
(
,
,
canvas
.
width
,
canvas
.
height
);
//createnewparticles
var
amount
=
particleRate
*
deltaTime
;
for
(
var
i
=
;
i
amount
;
i
++){
var
pos
=
pointOnHeart
(
Math
.
PI
-
2
*
Math
.
PI
*
Math
.
random
());
var
dir
=
pos
.
clone
().
length
(
settings
.
particles
.
velocity
);
particles
.
add
(
canvas
.
width
/
2
+
pos
.
x
,
canvas
.
height
/
2
-
pos
.
y
,
dir
.
x
,-
dir
.
y
);
}
//updateanddrawparticles
particles
.
update
(
deltaTime
);
particles
.
draw
(
context
,
image
);
}
//handle(re-)sizingofthecanvas
function
onResize
(){
canvas
.
width
=
canvas
.
clientWidth
;
canvas
.
height
=
canvas
.
clientHeight
;
}
window
.
onresize
=
onResize
;
//delayrenderingbootstrap
setTimeout
(
function
(){
onResize
();
render
();
},
10
);
})(
document
.
getElementById
(
pinkboard
));
/
script
!--名字--
div
class
=
"box"
/
div
/
BODY
/
HTML
欢迎