css水波纹动画效果
时间: 2023-11-14 11:09:46 浏览: 55
可以使用CSS3的伪元素和动画属性来实现水波纹动画效果。具体实现步骤如下:
1. 创建一个容器元素,设置宽高和背景颜色。
2. 在容器元素中创建一个伪元素,设置宽高和圆角,使其成为一个圆形。
3. 使用CSS3的动画属性,设置伪元素的动画效果,包括动画名称、持续时间、延迟时间、动画方式等。
4. 在动画中,使用CSS3的变换属性,设置伪元素的缩放比例和透明度,使其呈现出水波纹效果。
以下是一个简单的示例代码:
```html
<div class="ripple"></div>
```
```css
.ripple {
width: 200px;
height: 200px;
background-color: #009688;
position: relative;
}
.ripple::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
opacity: 0;
animation-name: ripple;
animation-duration: 2s;
animation-delay: 0s;
animation-timing-function: ease-out;
}
@keyframes ripple {
from {
opacity: 1;
width: 0;
height: 0;
}
to {
opacity: 0;
width: 400px; height: 400px;
}
}
```