HTML5七夕情人节表白网页制作【爱心雨(满屏爱心飘落)】HTML+CSS+JavaScript
以下是一个简单的HTML页面示例，使用HTML、CSS和JavaScript创建一个全屏的爱心飘落效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕情人节爱心飘落</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#heart-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.heart {
position: absolute;
width: 10px;
height: 10px;
background: #ff0000;
transform: rotate(45deg);
animation: fall 5s infinite;
}
@keyframes fall {
0% {
opacity: 1;
transform: translateY(-100px) rotate(45deg);
}
100% {
opacity: 0;
transform: translateY(1000px) rotate(45deg);
}
}
</style>
</head>
<body>
<div id="heart-container">
<!-- 爱心将动态生成在此处 -->
</div>
<script>
function createHeart() {
const heart = document.createElement('div');
heart.classList.add('heart');
document.getElementById('heart-container').appendChild(heart);
// 设置爱心的初始位置
heart.style.left = Math.random() * window.innerWidth + 'px';
heart.style.top = '-5px'; // 初始位置在屏幕上方
}
// 每秒生成一个新的爱心
setInterval(createHeart, 1000);
</script>
</body>
</html>这段代码定义了一个简单的爱心飘落动画，每秒钟会在屏幕上生成一个新的爱心元素，并赋予它随机的位置和动画属性。通过CSS样式，动画会使爱心从屏幕上方落到下方，并随之变为透明。
评论已关闭