首页HTML，圣诞树代码

HTML，圣诞树代码

时间: 2023-12-14 14:34:14 浏览: 151

以下是一个简单的HTML圣诞树代码示例，你可以将其复制到HTML文件中并在浏览器中打开以查看效果： ```html <!DOCTYPE html> <html> <head> <title>Christmas Tree</title> <style> body { background-color: #1a1a1a; } .tree { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green; } .star { position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 30px solid yellow; transform: rotate(45deg); } .light { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: yellow; animation: blink 1s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } </style> </head> <body> <div class="tree"></div> <div class="star"></div> <div class="light" style="top: 40%; left: 45%;"></div> <div class="light" style="top: 70%; left: 55%;"></div> <div class="light" style="top: 80%; left: 35%;"></div> </body> </html> ```

阅读全文