动态圣诞树html网页代码
时间: 2023-12-20 11:32:29 浏览: 236
以下是一个简单的动态圣诞树的HTML网页代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态圣诞树</title>
<style>
body {
background-color: #000;
}
.tree {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}
.tree:before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid green;
transform: translateX(-50%);
}
.tree:after {
content: "";
position: absolute;
top: 200px;
left: 50%;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: brown;
transform: translateX(-50%);
}
.tree .ornament {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}
.tree .ornament:nth-child(1) {
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.tree .ornament:nth-child(2) {
top: 80px;
left: 30px;
}
.tree .ornament:nth-child(3) {
top: 80px;
right: 30px;
}
.tree .ornament:nth-child(4) {
top: 120px;
left: 50%;
transform: translateX(-50%);
}
.tree .ornament:nth-child(5) {
top: 160px;
left: 30px;
}
.tree .ornament:nth-child(6) {
top: 160px;
right: 30px;
}
</style>
</head>
<body>
<div class="tree">
<div class="ornament"></div>
<div class="ornament"></div>
<div class="ornament"></div>
<div class="ornament"></div>
<div class="ornament"></div>
<div class="ornament"></div>
</div>
</body>
</html>
```
这段代码会创建一个动态的圣诞树,树干是棕色的,树叶是绿色的,装饰品是红色的圆球。你可以将这段代码保存为一个HTML文件,然后在浏览器中打开,就可以看到动态的圣诞树了。