HTML愛心雨是一種可以在網(wǎng)頁(yè)上制作出落下愛心的特效。通過一些簡(jiǎn)單的HTML和CSS代碼，我們可以輕松地實(shí)現(xiàn)這一效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML愛心雨特效</title>
<style>
body {
background-color: #fff;
}
.heart {
position: absolute;
display: block;
background-image: url("heart.png"); /* 替換成你的愛心圖片 */
width: 30px; /* 圖片寬度 */
height: 30px; /* 圖片高度 */
animation: fall 3s linear infinite;
z-index: 999;
}
@keyframes fall {
from {
top: -100px; /* 起始上邊距 */
}
to {
top: 100%; /* 終止上邊距 */
}
}
.heart:nth-child(1) {
left: 5%;
animation-delay: 0.4s;
}
.heart:nth-child(2) {
left: 15%;
animation-delay: 0.2s;
animation-duration: 5s;
}
.heart:nth-child(3) {
left: 25%;
animation-delay: 2s;
}
.heart:nth-child(4) {
left: 35%;
animation-delay: 3s;
animation-duration: 8s;
}
.heart:nth-child(5) {
left: 45%;
animation-delay: 1s;
animation-duration: 6s;
}
.heart:nth-child(6) {
left: 55%;
animation-delay: 2.4s;
}
.heart:nth-child(7) {
left: 65%;
animation-delay: 1.2s;
animation-duration: 7s;
}
.heart:nth-child(8) {
left: 75%;
animation-delay: 2.6s;
}
.heart:nth-child(9) {
left: 85%;
animation-delay: 0.8s;
animation-duration: 5s;
}
</style>
</head>
<body>
<script>
/* 創(chuàng)建愛心 */
function createHeart() {
const heart = document.createElement("span");
heart.classList.add("heart");
document.body.appendChild(heart);
/* 利用定時(shí)器清除已經(jīng)掉落到底部的愛心 防止內(nèi)存泄漏 */
setTimeout(() => {
heart.remove();
}, 5000);
}
setInterval(createHeart, 200);
</script>
</body>
</html>上述代碼中，我們使用了CSS的animation屬性來控制愛心的下落，通過JavaScript不斷在DOM中創(chuàng)建愛心DOM節(jié)點(diǎn)，再用定時(shí)器來清除已經(jīng)落到底部的愛心，達(dá)到了可以無(wú)限下落的效果。
好的，現(xiàn)在我們已經(jīng)掌握了HTML愛心雨的制作方法，可以在網(wǎng)頁(yè)中添加一個(gè)美麗的特效了。不過在使用時(shí)，需要注意愛心圖片的大小和格式，同時(shí)也要盡可能的優(yōu)化代碼，避免頁(yè)面的性能問題。