HTML滿屏飄愛心代碼下載
現(xiàn)在是浪漫的時(shí)代，無論是情人節(jié)還是生日，都需要一些特別的東西來表達(dá)我們的愛意。而網(wǎng)頁中也可以通過HTML滿屏飄愛心的特效來展現(xiàn)濃濃的愛意。下面是一段完整的HTML滿屏飄愛心代碼，可供大家下載使用。
<html>
<head>
<title>HTML滿屏飄愛心效果</title>
<meta charset="UTF-8">
<style type="text/css">
*{ margin: 0; padding: 0; }
canvas{ position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<script type="text/javascript">
var MAX = 100;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var Canvas = document.getElementById('c');
var cx = Canvas.getContext('2d');
var particles = [];
function createParticles() {
for(var i = 0; i < MAX; i++) {
var particle = {
x: Math.random() * WIDTH,
y: Math.random() * HEIGHT,
r: Math.random() * 3 + 1,
d: Math.random() * MAX,
color: "rgba("+ Math.floor(Math.random() * 255) +", "+ Math.floor(Math.random() * 255) +", "+ Math.floor(Math.random() * 255) +", 0.5)",
tilt: Math.floor(Math.random() * 5) -5,
tiltAngleIncremental: Math.random() * 0.07 +0.05,
tiltAngle: 0
};
particles.push(particle);
}
}
function drawParticles() {
cx.clearRect(0, 0, WIDTH, HEIGHT);
cx.globalCompositeOperation = "lighter";
for(var i = 0; i < particles.length; i++) {
var p = particles[i];
cx.beginPath();
cx.lineWidth = p.r;
cx.strokeStyle = p.color;
cx.moveTo(p.x + p.tilt + (p.r / 2), p.y);
cx.lineTo(p.x + p.tilt, p.y + p.tilt + (p.r / 2));
cx.stroke();
}
updateTiltangles();
}
var angle = 0;
function updateTiltangles() {
angle += 0.1;
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
p.tiltAngle += p.tiltAngleIncremental;
p.tilt = Math.sin(angle + p.d) * 15 * p.tiltAngle;
}
}
createParticles();
setInterval(drawParticles, 33);
</script>
</body>
</html>這段代碼主要利用了canvas畫布的特性，通過隨機(jī)生成一些參數(shù)，如坐標(biāo)、大小、顏色等，達(dá)到實(shí)現(xiàn)滿屏飄落的效果。大家可以根據(jù)自己的需求來調(diào)整MAX、WIDTH和HEIGHT這三個(gè)參數(shù)，來控制效果的密度和大小。此外，也可以根據(jù)自己的喜好來調(diào)整顏色和透明度等參數(shù)，使效果更加艷麗動(dòng)人。
最后，祝大家在愛的世界里幸福快樂！