js+css实现圣诞树
时间: 2023-09-04 20:09:30 浏览: 56
以下是一个简单的js css实现圣诞树的示例代码:
HTML:
```
<div class="tree">
<div class="tree-top"></div>
<div class="tree-body">
<div class="tree-layer"></div>
<div class="tree-layer"></div>
<div class="tree-layer"></div>
<div class="tree-layer"></div>
<div class="tree-layer"></div>
<div class="tree-layer"></div>
<div class="tree-layer"></div>
<div class="tree-layer"></div>
</div>
</div>
```
CSS:
```
.tree {
margin: 50px auto;
position: relative;
width: 150px;
height: 200px;
}
.tree-top {
position: absolute;
top: 0;
left: 50%;
margin-left: -25px;
width: 50px;
height: 50px;
background-color: brown;
border-radius: 50% 50% 0 0;
}
.tree-body {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -50px;
width: 100px;
height: 150px;
}
.tree-layer {
width: 100%;
height: 20px;
background-color: green;
border-radius: 50%;
margin-bottom: 5px;
}
.tree-layer:nth-child(2n) {
margin-left: 10px;
}
.tree-layer:nth-child(3n) {
margin-left: -10px;
}
.tree-layer:last-child {
margin-bottom: 0;
height: 30px;
background-color: yellow;
}
```
JS:
```
// 生成随机的彩灯颜色
function randomColor() {
var colors = ["red", "green", "blue", "yellow", "pink", "purple", "orange"];
return colors[Math.floor(Math.random() * colors.length)];
}
// 在树上添加彩灯
function addLights() {
var treeLayers = document.querySelectorAll(".tree-layer");
for (var i = 0; i < treeLayers.length; i++) {
var light = document.createElement("div");
light.classList.add("light");
light.style.backgroundColor = randomColor();
treeLayers[i].appendChild(light);
}
}
addLights();
```
该代码使用CSS绘制了一个简单的圣诞树,使用JS在树上添加随机彩灯。您可以根据需要更改CSS样式,并根据需要添加或删除JS功能。