最近，看到了一種非常有趣的 HTML 代碼效果——愛心代碼飄滿文字！經過簡單的實現，就可以讓你的網頁或博客充滿愛的味道。
<!DOCTYPE html>
<html>
<head>
<title>愛心代碼飄滿文字</title>
<style>
.love {
font-size: 30px;
color: red;
position: absolute;
animation: love-fall 10s infinite;
}
@keyframes love-fall {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 100vh);
}
}
</style>
</head>
<body>
<h1>一份愛的陪伴</h1>
<p>這是一個愛心代碼飄滿文字的例子。</p>
<div id="love-container"></div>
<script>
var love_container = document.getElementById("love-container");
for (var i = 0; i < 50; i++) {
var love = document.createElement("div");
love.className = "love";
love.innerHTML = "<3";
love.style.left = Math.random() * window.innerWidth + "px";
love.style.top = Math.random() * window.innerHeight + "px";
love_container.appendChild(love);
}
</script>
</body>
</html>使用這段代碼，你可以輕松地實現一份愛的陪伴，讓所有訪問你網頁的人都陷入溫馨浪漫的氛圍中。通過控制 CSS 的動畫效果，實現了愛心代碼從頁面頂部慢慢飄落至底部，而代碼中的 JavaScript 部分可以根據你的需要自定義愛心數量和樣式。
在此，祝你使用這段代碼，讓你的網頁充滿愛，越來越美好！