今天我們來學習一種有趣的 HTML 滿屏飄愛心代碼加字。這個代碼可以在網頁背景中飄落很多紅色的愛心和一堆可愛的字，讓你的網頁變得更加溫馨和有趣。
<html>
<head>
<title>滿屏飄愛心代碼</title>
<style>
/* 設置文字樣式 */
.text {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
font-size: 40px;
color: #fff;
text-shadow: 0 0 10px #ff0000;
text-align: center;
}
/* 設置愛心樣式 */
.heart {
position: absolute;
width: 20px;
height: 20px;
background: #ff0000;
transform: rotate(45deg);
animation: heart 2s ease-in-out infinite;
}
/* 愛心動畫 */
@keyframes heart {
0% {
top: -20px;
left: 50%;
}
50% {
top: 50%;
left: 30%;
}
100% {
top: 100%;
left: -20px;
}
}
</style>
</head>
<body>
<div class="text">我們永遠在一起</div>
<!-- 創建很多愛心 -->
<script>
var hearts = [];
setInterval(function() {
createHeart();
}, 200);
function createHeart() {
var heart = document.createElement("div");
heart.classList.add("heart");
heart.style.left = Math.random() * 100 + "%";
heart.style.animationDuration = Math.random() * 2 + 1 + "s";
document.body.appendChild(heart);
hearts.push(heart);
/* 移除超出屏幕的愛心 */
setTimeout(function() {
heart.remove();
hearts.splice(hearts.indexOf(heart), 1);
}, 3000);
}
</script>
</body>
</html>這個代碼非常簡單，只需要在 body 中添加一個用于顯示文字的 div 和一個用于飄落愛心的 script。在 style 中設置了文字和愛心的樣式和動畫，讓它們變得更加美觀和有趣。以及設置了創建和移除愛心的 JavaScript 代碼。
現在，只需要將這個代碼復制到你的 HTML 頁面中，就可以讓你的網頁變得溫馨又有趣了。