愛心滿屏飄是一種常見的網頁特效，它可以增加頁面的趣味性和美觀度，提高用戶體驗。如果你想在自己的網頁上添加這個特效，不妨試試以下的HTML代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>愛心滿屏飄特效</title>
<style>
/* 定義愛心的樣式 */
.heart {
display: block;
width: 20px;
height: 20px;
background: red;
transform: rotate(45deg);
position: absolute;
animation: heart-float 2s ease-out infinite;
}
/* 定義動畫效果 */
@keyframes heart-float {
0% {
transform: translate3d(0, 0, 0);
}
70% {
transform: translate3d(0, -25px, 0);
}
100% {
transform: translate3d(0, -10px, 0);
}
}
</style>
</head>
<body>
<script>
// 添加愛心
setInterval(function() {
var heart = document.createElement("div");
heart.classList.add("heart");
heart.style.left = Math.random() * 100 + "%";
heart.style.top = Math.random() * 100 + "%";
document.body.appendChild(heart);
setTimeout(function() {
heart.remove();
}, 2000);
}, 200);
</script>
</body>
</html>以上代碼實現了愛心滿屏飄的效果。在HTML中，我們定義了愛心的樣式和動畫效果，然后通過JavaScript循環添加愛心，并設置其隨機位置。需要注意的是，添加的愛心需要在一段時間后移除，避免過多的DOM節點影響頁面性能。
如果你想在自己的網頁中使用這個特效，只需要將以上HTML代碼復制到自己的代碼中，然后根據需要調整樣式和動畫效果。有了這個特效，你的網頁必定會更加有趣和吸引人！