首页动态圣诞树代码html

动态圣诞树代码html

时间: 2023-12-25 09:05:08 浏览: 87

以下是一个简单的动态圣诞树的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <style> @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .tree { position: relative; width: 200px; height: 300px; margin: 0 auto; } .tree:before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 150px solid green; transform: translateX(-50%); } .blinking-light { position: absolute; top: 50px; left: 50%; width: 10px; height: 10px; background-color: yellow; border-radius: 50%; animation: blink 1s infinite; } </style> </head> <body> <div class="tree"> <div class="blinking-light"></div> </div> </body> </html> ``` 这段代码使用CSS的`@keyframes`动画和`animation`属性来实现闪烁的灯光效果。在一个`div`元素中，使用`::before`伪元素来绘制圣诞树的形状，然后在树的顶部放置一个闪烁的灯光。

阅读全文