html实现花瓣掉落背景
时间: 2024-01-09 19:05:03 浏览: 128
html实现花瓣下落动画
以下是一个使用HTML和CSS实现花瓣掉落背景的例子:
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes falling-petals {
0% { transform: translateY(-100%); }
100% { transform: translateY(100vh); }
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.petal {
position: absolute;
width: 10px;
height: 10px;
background-color: pink;
border-radius: 50%;
animation: falling-petals 5s linear infinite;
}
.petal:nth-child(1) {
top: -10px;
left: 10%;
animation-delay: 0s;
}
.petal:nth-child(2) {
top: -10px;
left: 20%;
animation-delay: 0.5s;
}
.petal:nth-child(3) {
top: -10px;
left: 30%;
animation-delay: 1s;
}
/* 添加更多花瓣样式 */
</style>
</head>
<body>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<!-- 添加更多花瓣元素 -->
</body>
</html>
```
这段代码使用了CSS的`@keyframes`属性来定义了一个名为`falling-petals`的动画,通过`transform`属性实现花瓣的垂直位移。然后在HTML中创建了多个`div`元素作为花瓣,并为每个花瓣添加了不同的位置和延迟时间,以实现花瓣的掉落效果。
阅读全文