css设置盒子的宽度从左往右逐渐消失的动画
时间: 2023-08-24 17:06:37 浏览: 151
要实现盒子宽度从左往右逐渐消失的动画效果,你可以结合CSS动画和渐变背景来实现。以下是一个示例代码:
```css
.box {
width: 200px;
height: 200px;
background: linear-gradient(to right, transparent, red);
animation: gradientDisappear 3s infinite;
}
@keyframes gradientDisappear {
0% {
background-size: 100% 100%;
}
100% {
background-size: 0% 100%;
}
}
```
在上面的代码中,我们使用了`@keyframes`定义了一个名为`gradientDisappear`的动画。动画包含了两个关键帧,0%和100%。在0%关键帧,背景的大小是100% 100%,即完全显示。在100%关键帧,背景的大小是0% 100%,即完全消失。
然后,我们将这个动画应用到盒子上,通过`animation`属性设置动画名称为`gradientDisappear`,持续时间为3秒,并且设置为无限循环。
这样,你就可以实现盒子宽度从左往右逐渐消失的动画效果了。你可以根据需要调整动画的持续时间和渐变背景的颜色。希望对你有所帮助!
阅读全文