用html代码圣诞树
时间: 2023-12-14 18:34:01 浏览: 87
以下是一个用HTML和CSS代码制作的简单圣诞树:
```html
<!DOCTYPE html>
<html>
<head>
<title>Christmas Tree</title>
<style>
body {
background-color: #151522;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
}
.tree {
position: relative;
width: 150px;
height: 200px;
margin: 0 auto;
}
.tree:before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 100px solid green;
transform: translateX(-50%);
}
.tree:after {
content: "";
position: absolute;
top: 100px;
left: 50%;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px 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%) rotateZ(35deg);
}
.light {
position: absolute;
top: -10px;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: yellow;
transform: translateX(-50%);
animation: blink 1s infinite;
}
.light:nth-child(1) {
top: -20px;
left: 30%;
animation-delay: 0.5s;
}
.light:nth-child(2) {
top: -30px;
left: 70%;
animation-delay: 1s;
}
.light:nth-child(3) {
top: 0;
left: 50%;
animation-delay: 1.5s;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="tree">
<div class="star"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
</div>
</body>
</html>
```
阅读全文