首页html满屏飘鲜花代码

html满屏飘鲜花代码

时间: 2023-08-24 22:08:07 浏览: 199

以下是一个简单的HTML代码示例，可以在网页上实现满屏飘鲜花的效果： ```html <!DOCTYPE html> <html> <head> <title>满屏飘花</title> <style> body { background-color: black; overflow: hidden; } .flower { position: absolute; display: block; width: 20px; height: 20px; border-radius: 50%; background-color: red; box-shadow: 0px 0px 10px red; animation: flower 10s linear infinite; } @keyframes flower { 0% { transform: translateY(0px) rotate(0deg); } 100% { transform: translateY(800px) rotate(360deg); } } </style> </head> <body> <script> // 随机生成鲜花的数量 var count = Math.floor(Math.random() * 50) + 50; for (var i = 0; i < count; i++) { // 创建鲜花元素 var flower = document.createElement('div'); flower.className = 'flower'; flower.style.left = Math.random() * window.innerWidth + 'px'; flower.style.animationDelay = Math.random() * 10 + 's'; // 将鲜花添加到页面中 document.body.appendChild(flower); } </script> </body> </html> ``` 这段代码通过在页面中动态创建多个带动画的小圆点，模拟出鲜花飘落的效果。你可以将代码复制到一个HTML文件中，保存后在浏览器中打开，就可以看到满屏飘鲜花的效果了。

阅读全文