写一个网页版圣诞树代码
时间: 2023-09-11 16:12:24 浏览: 65
以下是一个简单的网页版圣诞树代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页版圣诞树</title>
<style>
body {
background-color: #1a1a1a;
}
.tree {
text-align: center;
font-size: 1px;
}
.tree span {
color: #00ff00;
font-size: 80px;
line-height: 60px;
display: block;
}
.tree span:before {
content: "▲";
color: #007f00;
position: relative;
top: -30px;
left: -12px;
transform: rotate(-35deg);
transform-origin: center;
display: inline-block;
width: 0px;
height: 0px;
text-align: center;
}
.tree span:after {
content: "";
position: absolute;
z-index: -1;
top: 60px;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 70px solid #007f00;
transform: rotate(-35deg);
transform-origin: 0 0;
}
.tree span:last-child:after {
display: none;
}
</style>
</head>
<body>
<div class="tree">
<span>♦</span>
<span>♦♦</span>
<span>♦♦♦</span>
<span>♦♦♦♦</span>
<span>♦♦♦♦♦</span>
<span>♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦</span>
<span>♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦</span>
</div>
</body>
</html>
```
你可以将该代码复制到一个 HTML 文件中并在浏览器中打开,即可看到一个简单的网页版圣诞树。