HTML滿屏飄愛心是一種既簡單又美麗的網頁特效，很受廣大網友的喜愛。下面我們就來介紹一下如何使用HTML代碼實現這種滿屏飄愛心的效果。
<html>
<head>
<title>HTML滿屏飄愛心</title>
</head>
<body>
<script type="text/javascript">
var minSize = 10; // 最小的愛心大小
var maxSize = 30; // 最大的愛心大小
var newOn = 100; // 每隔多少毫秒出現一個新的愛心
var flake = '♥'; // 愛心樣式
var colors = ['#f00', '#0f0', '#00f', '#ff0', '#fff']; // 愛心顏色
var elems = [], timer = null;
function Heart() {
this.x = Math.floor(Math.random() * window.innerWidth);
this.y = Math.floor(Math.random() * window.innerHeight);
this.size = Math.floor(minSize + Math.random() * (maxSize - minSize));
this.color = colors[Math.floor(Math.random() * colors.length)];
this.elem = document.createElement('span');
this.elem.style.position = 'absolute';
this.elem.style.fontSize = this.size + 'px';
this.elem.style.color = this.color;
this.elem.innerHTML = flake;
this.elem.style.left = this.x + 'px';
this.elem.style.top = this.y + 'px';
document.body.appendChild(this.elem);
elems.push(this.elem);
}
function moveHearts() {
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
elem.style.top = (elem.offsetTop + elem.fontSize / 2) + 'px';
if (elem.offsetTop > window.innerHeight) {
document.body.removeChild(elem);
elems.splice(i, 1);
}
}
}
function startHearts() {
clearInterval(timer);
timer = setInterval(function () {
new Heart();
moveHearts();
}, newOn);
}
function stopHearts() {
clearInterval(timer);
for (var i = 0; i < elems.length; i++) {
document.body.removeChild(elems[i]);
}
elems = [];
}
startHearts();
</script>
</body>
</html>這是一段參照代碼，你可以根據實際情況進行修改，比如添加自己的愛心圖案，調整愛心的大小、顏色等參數。如果你不想要這些愛心了，可以調用stopHearts()函數來停止它們的運動。
總之，HTML滿屏飄愛心是一種簡單而又好玩的網頁特效，它可以讓你的網頁更加生動有趣。相信你也能夠輕松地實現這種效果，并吸引更多的網友來訪問你的網站。