首页全屏圣诞树代码html

全屏圣诞树代码html

时间: 2023-12-25 21:04:41 浏览: 84

以下是一个全屏圣诞树的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; overflow: hidden; } .tree { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100vh; background-color: #000; } .tree:before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 50vw solid transparent; border-right: 50vw solid transparent; border-bottom: 100vh solid green; } .tree:after { content: ""; position: absolute; top: 100vh; left: 50%; transform: translateX(-50%); width: 20vw; height: 20vh; background-color: brown; } </style> </head> <body> <div class="tree"></div> </body> </html> ``` 这段代码会创建一个全屏的圣诞树，使用黑色作为背景色，绿色作为树的颜色，棕色作为树干的颜色。你可以将这段代码保存为一个HTML文件，然后在浏览器中打开，即可看到全屏的圣诞树效果。

阅读全文