首页 >
css水光波纹的效果 |css控制文本缩进
p标签：
在网页设计中，除了文本内容外，还需要一些视觉效果来提高用户体验。CSS水光波纹效果就是其中之一。这种效果可以让网页元素有一种水波纹般的动态效果，非常的炫酷。
pre标签：
代码实现如下：
.ripple {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.ripple .ripple-wrap {
position: absolute;
border-radius: 50%;
opacity: 0;
animation: ripple 1s linear;
}
@keyframes ripple {
from {
transform: scale(0);
opacity: 1;
}
to {
transform: scale(2.5);
opacity: 0;
}
}
以上的代码中，大家通过定义一个类名为ripple的元素来创建水光波纹效果。通过设置该元素及其包裹元素的position为relative/absolute来使得其相对于父元素具有绝对定位。同时，通过border-radius属性将元素的形状变为一个圆形。opacity属性为0是为了使得元素不可见。
接下来，添加动画效果，通过CSS的animation来定义一个ripple动画，将初始状态的缩放为0及不透明度为1的元素通过一定的时间以缩放2.5及不可见作为结束状态，从而形成一个水波扩散的效果。
最后，大家需要在HTML中使用该类名即可让元素拥有水光波纹效果。