动态圣诞树代码html
时间: 2023-12-25 19:05:08 浏览: 76
以下是一个简单的动态圣诞树的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`伪元素来绘制圣诞树的形状,然后在树的顶部放置一个闪烁的灯光。
阅读全文