html圆形波浪动画
时间: 2023-07-01 15:20:11 浏览: 67
可以使用CSS3来创建一个圆形波浪动画,以下是一个简单的示例代码:
HTML代码:
```html
<div class="circle"></div>
```
CSS代码:
```css
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.circle:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 0%, #fff 100%);
transform-origin: bottom center;
transform: scaleY(0.6);
animation: wave 2s linear infinite;
}
@keyframes wave {
0% {
transform: scaleY(0.6);
}
50% {
transform: scaleY(1.4);
}
100% {
transform: scaleY(0.6);
}
}
```
这段代码会在一个圆形的容器中创建一个波浪动画。通过使用伪元素 `:before` 来创建一个白色的矩形,并通过线性渐变将底部透明度设置为0。然后通过 `transform` 属性对其进行缩放,使其呈现为波浪形状。最后使用 `animation` 属性来指定动画名称、持续时间、动画速度和循环次数等属性。
相关推荐
![](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)