HTML滿屏飄愛心代碼大全
<html>
<head>
<meta charset="UTF-8">
<title>滿屏飄愛心</title>
</head>
<body>
<style>
.heart {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
animation: heart 2s ease-out infinite;
}
@keyframes heart {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-20vh);
opacity: 0;
}
}
</style>
<script>
window.onload = function () {
var width = window.innerWidth;
var height = window.innerHeight;
setInterval(function () {
var left = Math.random() * width;
var top = Math.random() * height;
var heart = document.createElement('div');
heart.className = 'heart';
heart.style.left = left + 'px';
heart.style.top = top + 'px';
document.body.appendChild(heart);
setTimeout(function () {
document.body.removeChild(heart);
}, 2000); // 每個愛心飄出2秒后消失
}, 200); // 每200毫秒創建一個愛心
}
</script>
</body>
</html>以上代碼是一個簡單的HTML滿屏飄愛心的實現，通過CSS和JS實現隨機生成然后飄落，營造出浪漫溫馨的氛圍?？梢杂迷诒戆?、情人節、結婚等場合。