用css+js 实现一个动画:用一个颜色逐渐从下至上将一个盒子填满
时间: 2023-11-28 10:49:40 浏览: 36
可以通过设置盒子的 `background-color` 属性,并使用 `setInterval()` 方法来实现逐渐填充的动画效果。
HTML 代码:
```html
<div id="box"></div>
```
CSS 代码:
```css
#box {
width: 200px;
height: 200px;
background-color: #fff; /* 初始颜色 */
}
```
JS 代码:
```javascript
let box = document.getElementById('box');
let color = 0;
let interval = setInterval(() => {
if (color < 255) {
color++;
box.style.backgroundColor = `rgb(${color}, ${color}, ${color})`;
} else {
clearInterval(interval);
}
}, 10);
```
上述代码中,我们初始化了一个白色的盒子,使用 `setInterval()` 方法每隔10毫秒将盒子的颜色值递增,直到颜色值达到最大值255,最终实现了从下至上逐渐填充的动画效果。