用html生成一个圣诞树
时间: 2023-12-25 12:15:31 浏览: 26
<!DOCTYPE html>
<html>
<head>
<title>圣诞树</title>
<style>
body{
background-color: #2C3E50;
}
.tree{
position: relative;
margin: 0 auto;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid green;
animation: grow 2s ease-in-out;
}
.tree:before{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
}
.tree:after{
content: "";
position: absolute;
top: -75px;
left: -75px;
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 150px solid green;
}
.tree .star{
position: absolute;
top: -200px;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid yellow;
transform: rotate(45deg);
}
.tree .ornament{
position: absolute;
background-color: red;
border-radius: 50%;
animation: blink 2s infinite;
}
.tree .ornament1{
top: 50px;
left: -10px;
width: 20px;
height: 20px;
}
.tree .ornament2{
top: 80px;
left: -30px;
width: 20px;
height: 20px;
}
.tree .ornament3{
top: 120px;
left: -40px;
width: 20px;
height: 20px;
}
.tree .ornament4{
top: 150px;
left: -20px;
width: 20px;
height: 20px;
}
.tree .ornament5{
top: 100px;
left: 30px;
width: 20px;
height: 20px;
}
.tree .ornament6{
top: 140px;
left: 40px;
width: 20px;
height: 20px;
}
.tree .ornament7{
top: 180px;
left: 0;
width: 20px;
height: 20px;
}
.tree .ornament8{
top: 200px;
left: -20px;
width: 20px;
height: 20px;
}
.tree .ornament9{
top: 230px;
left: 0;
width: 20px;
height: 20px;
}
@keyframes grow{
0%{
transform: scale(0);
}
100%{
transform: scale(1);
}
}
@keyframes blink{
0%{
opacity: 0.5;
}
50%{
opacity: 1;
}
100%{
opacity: 0.5;
}
}
</style>
</head>
<body>
<div class="tree">
<div class="star"></div>
<div class="ornament ornament1"></div>
<div class="ornament ornament2"></div>
<div class="ornament ornament3"></div>
<div class="ornament ornament4"></div>
<div class="ornament ornament5"></div>
<div class="ornament ornament6"></div>
<div class="ornament ornament7"></div>
<div class="ornament ornament8"></div>
<div class="ornament ornament9"></div>
</div>
</body>
</html>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)