html圣诞树代码蓝色动态
时间: 2023-12-25 19:05:25 浏览: 42
以下是一个使用HTML和CSS实现的蓝色动态圣诞树代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
.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%);
}
.tree:after {
content: "";
position: absolute;
top: 150px;
left: 50%;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 75px solid green;
transform: translateX(-50%);
}
.star {
position: absolute;
top: -20px;
left: 50%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid yellow;
transform: translateX(-50%) rotate(45deg);
}
.balls {
position: absolute;
top: 180px;
left: 50%;
transform: translateX(-50%);
}
.ball {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
margin: 5px;
}
</style>
</head>
<body>
<div class="tree">
<div class="star"></div>
</div>
<div class="balls">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</body>
</html>
```
这段代码会在蓝色背景下显示一个动态的圣诞树,树干和树冠都是绿色的,顶部有一个黄色的星星,下方有五个红色的圆球。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)