首页html樱花树落代码

html樱花树落代码

时间: 2023-11-14 18:07:35 浏览: 199

以下是一个简单的 HTML 樱花树落代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>樱花树落</title> <style> body { background-color: #f5deb3; overflow: hidden; } .petal { position: absolute; background-image: url('https://i.imgur.com/7bMqNzK.png'); background-size: contain; width: 50px; height: 50px; animation: fall 10s linear infinite; transform-origin: center center; } @keyframes fall { from { transform: translate(0, -100%); } to { transform: translate(100vw, 100vh); } } </style> </head> <body> <script> for (let i = 0; i < 50; i++) { let petal = document.createElement('div'); petal.className = 'petal'; petal.style.left = Math.random() * window.innerWidth + 'px'; petal.style.animationDelay = Math.random() * 10 + 's'; document.body.appendChild(petal); } </script> </body> </html> ```

阅读全文