首页用html帮我写个圣诞树

用html帮我写个圣诞树

时间: 2023-12-18 20:03:57 浏览: 80

以下是一个简单的HTML代码，可以帮助你实现一个圣诞树的效果： ```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 green; } .tree:before { content: ""; position: absolute; top: -50px; left: -50px; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green; transform: rotate(180deg); } .tree:after { content: ""; position: absolute; top: -100px; left: -100px; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid green; transform: rotate(180deg); } .star { position: absolute; top: -70px; left: -15px; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 60px solid yellow; transform: rotate(35deg); } .light { position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; border-radius: 50%; background-color: yellow; box-shadow: 0 0 20px yellow; animation: blink 1s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } </style> </head> <body> <div class="tree"> <div class="star"></div> <div class="light" style="top: -50px; left: -50px;"></div> <div class="light" style="top: -50px; right: -50px;"></div> <div class="light" style="bottom: -50px; left: -50px;"></div> <div class="light" style="bottom: -50px; right: -50px;"></div> </div> </body> </html> ```

阅读全文