花瓣雨玫瑰雨特效html
时间: 2023-10-29 12:56:59 浏览: 94
以下是一个简单的HTML代码示例,用于创建花瓣雨和玫瑰雨的特效。这个特效是通过使用CSS和JavaScript实现的。
```html
<!DOCTYPE html>
<html>
<head>
<title>花瓣雨和玫瑰雨特效</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
font-family: Arial, sans-serif;
color: #fff;
}
#container {
position: relative;
height: 100vh;
}
.petal {
position: absolute;
top: -50px;
width: 40px;
height: 40px;
background-image: url('https://i.imgur.com/QYwYm7h.png');
background-size: cover;
animation: petal-fall 10s linear infinite;
transform-origin: 50% 50%;
opacity: 0.8;
}
@keyframes petal-fall {
0% {
transform: translate(0, -50px) rotate(0deg);
}
100% {
transform: translate(0, 100vh) rotate(360deg);
}
}
.rose-petal {
position: absolute;
top: -50px;
width: 40px;
height: 40px;
background-image: url('https://i.imgur.com/2QW6nG8.png');
background-size: cover;
animation: rose-petal-fall 10s linear infinite;
transform-origin: 50% 50%;
opacity: 0.8;
}
@keyframes rose-petal-fall {
0% {
transform: translate(0, -50px) rotate(0deg);
}
100% {
transform: translate(0, 100vh) rotate(360deg);
}
}
</style>
</head>
<body>
<div id="container">
<script>
function createPetals() {
for (var i = 0; i < 50; i++) {
var petal = document.createElement('div');
petal.className = 'petal';
petal.style.left = Math.random() * window.innerWidth + 'px';
petal.style.animationDelay = Math.random() * 10 + 's';
document.getElementById('container').appendChild(petal);
}
}
function createRosePetals() {
for (var i = 0; i < 50; i++) {
var rosePetal = document.createElement('div');
rosePetal.className = 'rose-petal';
rosePetal.style.left = Math.random() * window.innerWidth + 'px';
rosePetal.style.animationDelay = Math.random() * 10 + 's';
document.getElementById('container').appendChild(rosePetal);
}
}
window.onload = function() {
createPetals();
createRosePetals();
}
</script>
</div>
</body>
</html>
```
这个特效会在页面中创建一个全屏的容器,并在其中添加了花瓣和玫瑰花瓣的元素。这些元素使用CSS的animation属性创建了下落的动画效果。JavaScript代码会在页面加载时自动创建这些元素,并将它们添加到容器中。如果你想要调整特效的速度或数量,可以根据需要修改CSS和JavaScript代码。