使用html创建圣诞树代码
时间: 2023-12-25 19:05:42 浏览: 25
以下是使用HTML和CSS创建圣诞树的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Christmas Tree</title>
<style>
body {
background-color: #1a1a1a;
}
.tree {
position: relative;
margin: 0 auto;
width: 0;
height: 0;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 300px solid green;
}
.tree:before {
content: "";
position: absolute;
top: -150px;
left: -50px;
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 150px solid green;
}
.tree:after {
content: "";
position: absolute;
top: -300px;
left: -100px;
width: 0;
height: 0;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-bottom: 250px solid green;
}
.star {
position: absolute;
top: -350px;
left: 150px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 70px solid yellow;
transform: rotate(45deg);
}
.light {
position: absolute;
border-radius: 50%;
background-color: yellow;
animation: blink 1s infinite;
}
.light1 {
top: 100px;
left: 50px;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.light2 {
top: 150px;
left: 100px;
width: 15px;
height: 15px;
animation-delay: 0.5s;
}
.light3 {
top: 200px;
left: 150px;
width: 10px;
height: 10px;
animation-delay: 1s;
}
@keyframes blink {
0% {
opacity: 0.3;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
</style>
</head>
<body>
<div class="tree">
<div class="star"></div>
<div class="light light1"></div>
<div class="light light2"></div>
<div class="light light3"></div>
</div>
</body>
</html>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)