css3怎么制作圆形水波 |css 基线是什么意思

首先，大家要准备一个圆形水波的div元素，代码如下：

<div class="circle">
<div class="wave"></div>
</div>

接下来大家需要用CSS来制作水波效果。

首先，大家需要为圆形水波div元素设置一些基础样式：

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #58B9C5;
position: relative;
overflow: hidden;
}

上面的代码中，大家设置了圆形水波div元素的宽高都为200px，边框半径为50%以呈现圆形效果。大家给圆形水波div元素设置了背景颜色和定位方式。注意了，大家还将其overflow属性设置为hidden以后面实现水波效果做准备。

现在大家开始制作水波效果。这里大家需要用到Pseudo元素（伪元素）来实现。代码如下：

.circle .wave {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #58B9C5, #fff);
opacity: 0.5;
animation: wave 2s infinite linear;
}
.circle .wave:after {
content: "";
display: block;
position: absolute;
top: -100%;
left: 0;
right: 0;
background: linear-gradient(to bottom, transparent, #fff);
opacity: 0.5;
animation: wave 2s infinite linear;
}
@keyframes wave {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -50%);
}
}

上面的代码中，大家为.circle元素中的.wave元素设置了基础样式，使其覆盖整个圆形水波div元素，并在底部对齐。大家使用了线性渐变来为水波定义颜色，用opacity属性来调整波的透明度。大家还使用了CSS动画来实现波的无限循环。接着，大家借助Pseudo元素:after来创建第二个水波，这个波的颜色和形状和第一个波完全相同，只是其定位在第一个波的上方，高度为负值，用以补充上面的部分，呈现出完整的水波效果。

最后，大家用CSS关键帧动画transform: translate()属性使波动起来。

这样就完成了一个圆形水波效果的制作，效果类似于一个水池中荡漾的波纹。