Html滿屏飄愛(ài)心代碼是一種特別有趣的網(wǎng)頁(yè)特效，它能夠在網(wǎng)頁(yè)的屏幕上呈現(xiàn)無(wú)數(shù)個(gè)飄動(dòng)的愛(ài)心。其實(shí)這種特效的代碼也不難寫(xiě)，接下來(lái)我們就來(lái)具體介紹一下

/*設(shè)定背景樣式（可選）*/
body { 
background-color: #000066; 
}
/*設(shè)定愛(ài)心的圖片路徑*/
.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;
}
/*設(shè)定愛(ài)心的動(dòng)畫(huà)效果路徑*/
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
/*通過(guò)Javascript生成多個(gè)愛(ài)心*/
(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);
})();

通過(guò)以上代碼，我們就能夠讓愛(ài)心在網(wǎng)頁(yè)上飄動(dòng)起來(lái)了，只需要將以上代碼復(fù)制到你的網(wǎng)頁(yè)中即可生效。同時(shí)，我們還可以對(duì)這些代碼進(jìn)行修改，使得愛(ài)心的數(shù)量、顏色、大小、速度等方面得到進(jìn)一步的優(yōu)化。無(wú)論如何，Html滿屏飄愛(ài)心代碼絕對(duì)是網(wǎng)頁(yè)特效的一道佳品。