Html滿屏飄愛心代碼是一種特別有趣的網頁特效，它能夠在網頁的屏幕上呈現無數個飄動的愛心。其實這種特效的代碼也不難寫，接下來我們就來具體介紹一下

/*設定背景樣式（可選）*/
body { 
background-color: #000066; 
}
/*設定愛心的圖片路徑*/
.heart {
background-image: url('http://bit.ly/wow-heart');
background-repeat: no-repeat;
background-size: 60px 30px;
height: 30px;
width: 30px;
position: fixed;
z-index: 10;
}
/*設定愛心的動畫效果路徑*/
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
/*通過Javascript生成多個愛心*/
(function createHearts() {
var heart = document.createElement('div');
heart.classList.add('heart');
heart.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
heart.style.animationDelay = Math.floor(Math.random() * 4) + 's';
heart.style.animationDuration = Math.floor(Math.random() * 3) + 3 + 's';
document.body.appendChild(heart);
setTimeout(function() {
heart.remove();
}, 5000);
setTimeout(createHearts, 300);
})();

通過以上代碼，我們就能夠讓愛心在網頁上飄動起來了，只需要將以上代碼復制到你的網頁中即可生效。同時，我們還可以對這些代碼進行修改，使得愛心的數量、顏色、大小、速度等方面得到進一步的優化。無論如何，Html滿屏飄愛心代碼絕對是網頁特效的一道佳品。