我需要一个圣诞树静态网页代码
时间: 2023-06-08 09:07:21 浏览: 62
好的,我为您提供一个圣诞树静态网页代码的示例,供您参考:
<!DOCTYPE html>
<html>
<head>
<title>圣诞树</title>
<style>
body {
background-color: #f2f2f2;
}
.tree {
position: relative;
width: 200px;
height: 400px;
margin: 50px auto;
}
.tree:before,
.tree:after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 25px solid transparent;
border-bottom: 50px solid green;
transform: translate(-50%, -50%);
}
.tree:before {
border-bottom: 75px solid green;
transform: translate(-50%, -75%);
}
.tree:after {
border-bottom: 100px solid green;
transform: translate(-50%, -100%);
}
.tree__star {
position: absolute;
top: -40px;
left: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom: 30px solid yellow;
transform: translate(-50%, -50%);
}
.tree__ornament {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.tree__ornament1 {
top: 30%;
left: 20%;
}
.tree__ornament2 {
top: 45%;
left: 70%;
}
.tree__ornament3 {
top: 60%;
left: 40%;
}
</style>
</head>
<body>
<div class="tree">
<div class="tree__star"></div>
<div class="tree__ornament tree__ornament1"></div>
<div class="tree__ornament tree__ornament2"></div>
<div class="tree__ornament tree__ornament3"></div>
</div>
</body>
</html>
希望能够满足您的需求。