首页帮我用html写一个圣诞树

帮我用html写一个圣诞树

时间: 2023-03-28 12:01:50 浏览: 85

好的，以下是一个简单的 HTML 代码，可以用来绘制一个圣诞树： ``` <!DOCTYPE html> <html> <head> <title>圣诞树</title> <style> body { background-color: #1c1c1c; } .tree { position: relative; margin: auto; width: ; height: ; 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: ; height: ; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green; } .tree:after { content: ""; position: absolute; top: -100px; left: -100px; width: ; height: ; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid green; } .star { position: absolute; top: -70px; left: -15px; width: ; height: ; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 60px solid yellow; transform: rotate(35deg); } .light { position: absolute; top: -20px; left: -20px; width: 40px; height: 40px; border-radius: 50%; background-color: yellow; box-shadow: 20px yellow; animation: blink 1s infinite; } @keyframes blink { % { opacity: 1; } 50% { opacity: .5; } 100% { opacity: 1; } } </style> </head> <body> <div class="tree"> <div class="star"></div> <div class="light" style="top: -60px; left: -10px;"></div> <div class="light" style="top: -40px; left: 20px;"></div> <div class="light" style="top: -10px; left: -30px;"></div> </div> </body> </html> ``` 希望这个代码能够帮到你，祝你圣诞快乐！

阅读全文