请帮我圣诞树的html
时间: 2023-03-31 17:02:55 浏览: 36
代码。
好的,以下是一个简单的圣诞树 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>圣诞树</title>
<style>
body {
background-color: #1c1c1c;
}
.tree {
position: relative;
margin: auto;
width: ;
height: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
}
.tree:before {
content: "";
position: absolute;
top: -50px;
left: -50px;
width: ;
height: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
}
.tree:after {
content: "";
position: absolute;
top: -100px;
left: -100px;
width: ;
height: ;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid green;
}
.star {
position: absolute;
top: -70px;
left: -15px;
width: ;
height: ;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 60px solid yellow;
transform: rotate(35deg);
}
.light {
position: absolute;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: yellow;
box-shadow: 20px yellow;
animation: blink 1s infinite;
}
@keyframes blink {
% {
opacity: 1;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="tree">
<div class="star"></div>
<div class="light" style="top: -50px; left: -30px;"></div>
<div class="light" style="top: -80px; left: 20px;"></div>
<div class="light" style="top: -70px; left: 50px;"></div>
</div>
</body>
</html>
```
希望能对你有所帮助!
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)