首页圣诞树倒数代码html飘雪花

圣诞树倒数代码html飘雪花

时间: 2023-12-23 15:28:36 浏览: 108

以下是一个实现圣诞树倒数代码和飘雪花效果的HTML示例： ```html <!DOCTYPE html> <html> <head> <title>圣诞树倒数代码和飘雪花</title> <style> /* 圣诞树样式 */ .tree { text-align: center; } .tree .branch { display: inline-block; width: 20px; height: 30px; background-color: brown; margin-bottom: 5px; } .tree .star { display: block; width: 20px; height: 20px; background-color: yellow; margin: 0 auto; } .tree .card { display: inline-block; width: 20px; height: 20px; background-color: green; margin: 0 2px; } /* 雪花样式 */ .snowflake { position: absolute; width: 10px; height: 10px; background-color: white; border-radius: 50%; animation: snowfall linear infinite; } /* 雪花动画 */ @keyframes snowfall { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } } </style> </head> <body> <div class="tree"> <div class="branch"></div> <div class="branch"></div> <div class="branch"></div> <div class="star"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div>  <script> // 创建雪花 function createSnowflake() { const snowflake = document.createElement('div'); snowflake.className = 'snowflake'; snowflake.style.left = Math.random() * 100 + 'vw'; document.body.appendChild(snowflake); setTimeout(() => { snowflake.remove(); }, 5000); } // 每隔一段时间创建一个雪花 setInterval(createSnowflake, 200); </script> </body> </html> ``` 这段代码会在页面上显示一个圣诞树和飘雪花的效果。圣诞树由三个部分组成：树干、星星和卡片。飘雪花效果通过创建雪花元素并设置动画实现。

阅读全文