html粒子圣诞树代码
时间: 2023-12-17 11:29:14 浏览: 141
以下是一个简单的HTML粒子圣诞树代码,包括HTML、CSS和JS部分:
HTML部分:
```html
<div class="tree">
<div class="tree__trunk"></div>
<div class="tree__branches"></div>
<div class="tree__particles"></div>
</div>
```
CSS部分:
```css
.tree {
position: relative;
width: 200px;
height: 300px;
margin: 0 auto;
}
.tree__trunk {
position: absolute;
bottom: 0;
left: 50%;
width: 20px;
height: 100px;
margin-left: -10px;
background-color: brown;
}
.tree__branches {
position: absolute;
top: 0;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
background-color: green;
border-radius: 50% 50% 0 0;
}
.tree__particles {
position: absolute;
top: 0;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
overflow: hidden;
}
```
JS部分:
```javascript
const particles = document.querySelector('.tree__particles');
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 5 + 's';
particles.appendChild(particle);
}
```