写一段html的圣诞树代码
时间: 2023-06-30 17:27:01 浏览: 87
html实现圣诞树代码
以下是一个简单的HTML圣诞树代码,你可以在浏览器中运行它:
```html
<!DOCTYPE html>
<html>
<head>
<title>圣诞树</title>
<style>
body {
background-color: #111;
}
.tree {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 200px;
background-color: #0c3;
border-radius: 0 0 50% 50%;
overflow: hidden;
}
.tree:before {
position: absolute;
content: "";
top: -50px;
left: 0;
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 100px solid #0c3;
}
.tree:after {
position: absolute;
content: "";
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid #024;
}
.tree .ornament {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
animation: blink 1s infinite alternate;
}
.tree .ornament:nth-child(1) {
top: 40px;
left: 60px;
}
.tree .ornament:nth-child(2) {
top: 60px;
left: 20px;
}
.tree .ornament:nth-child(3) {
top: 70px;
left: 100px;
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
</style>
</head>
<body>
<div class="tree">
<div class="ornament"></div>
<div class="ornament"></div>
<div class="ornament"></div>
</div>
</body>
</html>
```
这段代码会生成一个绿色的圣诞树,上面挂着三个红色的圆球,圆球会闪烁。你可以根据自己的喜好和需求来修改这段代码,添加更多的装饰和动画效果。
阅读全文