HTML5滿屏愛心代碼

/* 設置頁面尺寸 */
html,body { height:100%;}
/* 定義畫布，并設置背景為黑色 */
#canvas {position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; background:#000;}
/* 定義心形 */
.heart { position:absolute; width:10px; height:10px; background:#f00; transform:rotate(45deg); }
/* 實現動畫 */
@keyframes animate {
0% { transform: translate(0, 0); }
100% { transform: translate(0, -1450px) rotate(-360deg); }
}
/* 批量生成心形 */
function Heart() {
var x = Math.random()*$("body").width();
var y = Math.random()*$("body").height();
var size = (Math.random()*10+5)+'px';
$('
')
.addClass('heart')
.css({
'left':x,
'top':y,
'width':size,
'height':size
})
.appendTo($('#canvas'))
.animate({
'translate': 'translate(0,-1500px)',
'rotate': '-720deg'
}, 5000, 'linear', function() {
$(this).remove();
new Heart();
});
}
/* 頁面加載完成后，啟動動畫 */
$(document).ready(function(){
for(var i=0;i<100;i++){
setTimeout(function(){
new Heart();
},i*1000);
}
});

以上是一段比較流行的html5滿屏愛心動畫代碼。使用canvas顯示一個黑色的畫布，然后通過批量生成div元素實現滿屏隨機飄落的紅色心形，每次動畫結束后將該div元素從頁面中移除。整個動畫使用CSS3實現。