HTML滿屏飄愛心代碼手機版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML滿屏飄愛心代碼手機版</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.heart {
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px;
background-color: #ff71ce;
border-radius: 50%;
transform: translate(-50%, -50%) scale(1) rotate(45deg);
animation: heartFloat ease-in-out 1.2s infinite;
}
@keyframes heartFloat {
0% {
transform: translate(-50%, -50%) scale(1) rotate(45deg);
}
20% {
transform: translate(-50%, -50%) scale(0.8) rotate(45deg);
}
40% {
transform: translate(-50%, -50%) scale(1) rotate(45deg);
}
60% {
transform: translate(-50%, -50%) scale(0.8) rotate(45deg);
}
80% {
transform: translate(-50%, -50%) scale(1) rotate(45deg);
}
100% {
transform: translate(-50%, -50%) scale(0.8) rotate(45deg);
}
}
</style>
</head>
<body>
<script>
var hearts = [];
var heartWrapper = document.createElement('div');
heartWrapper.style.width = window.innerWidth + 'px';
heartWrapper.style.height = window.innerHeight + 'px';
heartWrapper.style.position = 'absolute';
heartWrapper.style.top = 0;
heartWrapper.style.left = 0;
heartWrapper.style.zIndex = 9999;
document.body.appendChild(heartWrapper);
function generateHeart() {
var heart = document.createElement('div');
heart.className = 'heart';
hearts.push(heart);
heartWrapper.appendChild(heart);
setTimeout(function() {
heart.remove();
hearts.splice(hearts.indexOf(heart), 1);
}, 3000);
}
setInterval(function() {
generateHeart();
}, 100);
</script>
</body>
</html>以上是一段使用HTML制作的滿屏飄愛心的代碼，可以在手機瀏覽器中運行。
代碼中使用了CSS的動畫屬性，以及JavaScript操作DOM元素的方法，生成并操作愛心的運動。
這是一段簡單而有趣的代碼，可以用在情人節(jié)等特殊場合的展示中，讓人們感受到浪漫的氛圍。