动态圣诞树html代码
时间: 2023-12-26 12:06:40 浏览: 31
以下是一个简单的动态圣诞树的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态圣诞树</title>
<style>
.tree {
text-align: center;
}
.tree:before {
content: "";
display: block;
width: 0;
height: 0;
margin-left: auto;
margin-right: auto;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid green;
}
.tree .layer {
display: flex;
justify-content: center;
}
.tree .layer span {
background-color: brown;
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
margin: 0 10px;
}
.tree .layer .star {
background-color: yellow;
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
margin-top: -10px;
}
</style>
</head>
<body>
<div class="tree">
<div class="layer">
<span></span>
</div>
<div class="layer">
<span></span>
<span></span>
</div>
<div class="layer">
<span></span>
<span></span>
<span></span>
</div>
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="layer">
<span class="star"></span>
</div>
</div>
</body>
</html>
```
这段代码会生成一个简单的动态圣诞树,树的层数可以根据需要进行调整。你可以将这段代码保存为一个HTML文件,然后在浏览器中打开该文件,即可看到动态圣诞树的效果。