优化这段代码,使它具有动态效果
时间: 2023-06-27 15:00:46 浏览: 39
这里提供一种基于JavaScript的解决方案,可以实现动态效果。
HTML部分:
```html
<div id="box">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
```
CSS部分:
```css
#box {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
margin: 0 5px;
animation: bounce 0.5s infinite alternate;
}
@keyframes bounce {
from {
transform: translateY(0);
}
to {
transform: translateY(-10px);
}
}
```
JavaScript部分:
```javascript
const box = document.getElementById("box");
const dots = document.querySelectorAll(".dot");
let count = 0;
setInterval(() => {
dots[count % 3].classList.toggle("active");
count++;
}, 500);
```
这段代码的作用是,每隔0.5秒切换三个黑色圆点中的一个的状态(active类),实现动态效果。其中,CSS部分定义了圆点的样式和动画效果;JavaScript部分使用了setInterval函数来定时执行切换操作。