首页圣诞树动态html代码

圣诞树动态html代码

时间: 2023-12-25 18:05:25 浏览: 83

以下是一个简单的圣诞树动态HTML代码的例子： ```html <!DOCTYPE html> <html> <head> <style> .tree { position: relative; width: 120px; height: 200px; margin: 0 auto; } .tree:before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 100px solid green; transform: translateX(-50%); } .tree .ornament { position: absolute; width: 20px; height: 20px; background-color: red; border-radius: 50%; bottom: 0; left: 50%; transform: translateX(-50%); } .tree .ornament:nth-child(1) { bottom: 40px; } .tree .ornament:nth-child(2) { bottom: 80px; } .tree .ornament:nth-child(3) { bottom: 120px; } .tree .ornament:nth-child(4) { bottom: 160px; } .tree .star { position: absolute; width: 40px; height: 40px; background-color: yellow; border-radius: 50%; top: -20px; left: 50%; transform: translateX(-50%); } </style> </head> <body> <div class="tree"> <div class="ornament"></div> <div class="ornament"></div> <div class="ornament"></div> <div class="ornament"></div> <div class="star"></div> </div> </body> </html> ``` 这段代码会生成一个简单的圣诞树，树干使用绿色的三角形表示，树上有四个红色的装饰球和一个黄色的星星在树顶。你可以将这段代码复制到一个HTML文件中，然后在浏览器中打开该文件，就可以看到圣诞树的效果了。

阅读全文