首页使用前端代码做一个圣诞树

使用前端代码做一个圣诞树

时间: 2023-05-19 10:00:51 浏览: 111

好的，以下是一个简单的前端代码，可以用来制作一个圣诞树： ```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); } .star { position: absolute; top: -70px; left: 0; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 30px solid yellow; transform: rotate(35deg); } .light { position: absolute; top: -20px; left: -20px; width: 40px; height: 40px; border-radius: 50%; background-color: white; box-shadow: 0 0 20px 10px white; 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: -10px; left: -10px;"></div> <div class="light" style="top: -10px; right: -10px;"></div> <div class="light" style="bottom: -10px; left: -10px;"></div> <div class="light" style="bottom: -10px; right: -10px;"></div> </div> </body> </html> ``` 你可以将这段代码保存为一个 HTML 文件，然后在浏览器中打开，就可以看到一个简单的圣诞树了。

阅读全文