首页html实现花瓣掉落背景

html实现花瓣掉落背景

时间: 2024-01-09 10:05:03 浏览: 132

以下是一个使用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`元素作为花瓣，并为每个花瓣添加了不同的位置和延迟时间，以实现花瓣的掉落效果。

阅读全文