首页圣诞树代码html动态

圣诞树代码html动态

时间: 2023-12-14 18:34:43 浏览: 134

以下是一个简单的HTML、CSS和JavaScript代码示例，用于创建一个动态的圣诞树： ```html <!DOCTYPE html> <html> <head> <title>动态圣诞树</title> <style> body { background-color: #1a1a1a; } .tree { position: relative; margin: 0 auto; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #0b0b61; } .star { position: absolute; top: -30px; left: 25px; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #ffd700; transform: rotate(45deg); } .bulb { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #f00; animation: blink 1s infinite; } .bulb:nth-child(1) { top: -60px; left: 20px; animation-delay: 0s; } .bulb:nth-child(2) { top: -45px; left: 10px; animation-delay: 0.2s; } .bulb:nth-child(3) { top: -45px; right: 10px; animation-delay: 0.4s; } .bulb:nth-child(4) { top: -60px; right: 20px; animation-delay: 0.6s; } @keyframes blink { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } } </style> </head> <body> <div class="tree"> <div class="star"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> </div> <script> // 让灯泡闪烁 setInterval(function() { var bulbs = document.querySelectorAll('.bulb'); for (var i = 0; i < bulbs.length; i++) { bulbs[i].classList.toggle('on'); } }, 500); </script> </body> </html> ``` 这段代码使用HTML和CSS创建了一个三角形的圣诞树，使用JavaScript让灯泡闪烁。在CSS中，我们使用`border`属性创建三角形，使用`position`属性和`border-radius`属性创建灯泡。在JavaScript中，我们使用`setInterval`函数让灯泡闪烁。

阅读全文