瀑布水流动画代码实现
时间: 2023-09-17 08:13:35 浏览: 44
以下是一个简单的瀑布水流动画的实现:
HTML:
```
<div class="waterfall">
<div class="water"></div>
</div>
```
CSS:
```
.waterfall {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.water {
position: absolute;
bottom: 0;
width: 100%;
height: 10px;
background-color: #00aaff;
animation: waterfall 2s ease-in-out infinite;
}
@keyframes waterfall {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-50px);
opacity: 0;
}
}
```
解释:
- `.waterfall` 容器设置 `position: relative` 和 `overflow: hidden`,以便隐藏超出容器的水流。
- `.water` 水流设置 `position: absolute` 和 `bottom: 0`,以便保持在容器底部。`width` 和 `height` 可以根据需要进行调整。`background-color` 设置水流的颜色。
- `animation` 属性定义了动画效果,其中 `waterfall` 是动画名称,`2s` 是动画持续时间,`ease-in-out` 是动画速度变化,`infinite` 表示无限次循环播放。
- `@keyframes` 定义了动画的关键帧。`0%` 表示动画开始时的状态,`transform: translateY(0)` 表示水流初始位置在容器底部,`opacity: 1` 表示完全不透明。`100%` 表示动画结束时的状态,`transform: translateY(-50px)` 表示水流向上移动 50 像素,`opacity: 0` 表示完全透明。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)