首页写一个大雪纷飞的HTML代码

写一个大雪纷飞的HTML代码

时间: 2023-12-01 19:03:20 浏览: 98

以下是一个简单的大雪纷飞的HTML代码： ```html <!DOCTYPE html> <html> <head> <title>大雪纷飞</title> <style> body { background-color: #000; } .snowflake { position: absolute; color: #fff; font-size: 2em; opacity: 0.5; animation: snow 5s linear infinite; animation-delay: calc(-1 * var(--delay)); } @keyframes snow { 0% { transform: translateY(-10%); } 100% { transform: translateY(100%); } } </style> </head> <body> <script> const numSnowflakes = 25; for (let i = 1; i <= numSnowflakes; i++) { const snowflake = document.createElement('div'); snowflake.classList.add('snowflake'); snowflake.innerHTML = '❄'; snowflake.style.left = Math.random() * 100 + '%'; snowflake.style.setProperty('--delay', Math.random() * 5 + 's'); document.body.appendChild(snowflake); } </script> </body> </html> ``` 这段代码将在黑色背景上生成25个雪花，每个雪花会以不同的速度从上往下飘落。可以在浏览器中打开这个HTML文件，以查看效果。

阅读全文