首页用html做一个圣诞树代码

用html做一个圣诞树代码

时间: 2024-05-11 09:17:03 浏览: 59

好的，以下是一个简单的圣诞树 HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>圣诞树</title> <style> body { background-color: #000; color: #fff; text-align: center; } .tree { margin: 50px auto; position: relative; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 150px solid green; } .star { position: absolute; top: -50px; left: 50px; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid yellow; transform: rotate(45deg); } .bulb { position: absolute; width: 20px; height: 20px; border-radius: 10px; background-color: #f00; box-shadow: 0 0 20px #f00; animation: flicker 1s infinite alternate; } .bulb:nth-child(1) { top: 100px; left: 40px; } .bulb:nth-child(2) { top: 120px; left: 80px; } .bulb:nth-child(3) { top: 150px; left: 20px; } .bulb:nth-child(4) { top: 170px; left: 60px; } .bulb:nth-child(5) { top: 200px; left: 10px; } .bulb:nth-child(6) { top: 220px; left: 50px; } .bulb:nth-child(7) { top: 250px; left: 30px; } .bulb:nth-child(8) { top: 270px; left: 70px; } @keyframes flicker { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } </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 class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> </div> </body> </html> ``` 你可以将这段代码复制粘贴到一个 HTML 文件中，然后在浏览器中打开它来查看圣诞树的效果。

阅读全文