html css 流水波浪,使用CSS3实现简单的流水和波浪
时间: 2024-06-08 09:05:55 浏览: 16
要实现简单的流水和波浪效果,可以使用CSS3的动画和伪元素属性。以下是一个示例代码:
```html
<div class="wave"></div>
```
```css
.wave {
position: relative;
height: 150px;
width: 100%;
background: #008cff;
}
.wave::before,
.wave::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: inherit;
z-index: -1;
}
.wave::before {
transform: skewY(-10deg);
transform-origin: top left;
animation: wave 2s ease-in-out infinite;
}
.wave::after {
transform: skewY(10deg);
transform-origin: top right;
animation: wave 1.5s ease-in-out infinite;
}
@keyframes wave {
0% {
transform: translateX(0) skewY(-10deg);
}
50% {
transform: translateX(25%) skewY(10deg);
}
100% {
transform: translateX(0) skewY(-10deg);
}
}
```
这里使用了一个主要的 div 元素和两个伪元素 before 和 after。before 伪元素设置了一个向左倾斜的波浪效果,而 after 伪元素则设置了一个向右倾斜的波浪效果。这两个波浪效果都使用了动画和 transform 属性来实现。
可以根据需要调整波浪的高度、颜色和动画速度等属性。
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)