css3水特效 |css销售术语缩写

.wave {
position: relative;
width: 200px;
height: 200px;
}
.wave:before, .wave:after {
content: "";
position: absolute;
width: 200%;
height: 100%;
top: 0;
left: -50%;
z-index: -1;
}
.wave:before {
background: linear-gradient(to bottom, #ffffff 50%, #69c8ff 100%);
animation: wave1 2s infinite linear;
}
.wave:after {
background: linear-gradient(to bottom, #ffffff 50%, #69c8ff 100%);
animation: wave2 2s infinite linear;
}
@keyframes wave1 {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
@keyframes wave2 {
from {
transform: translate3d(-50%, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}

以上代码实现了一个简单的水波纹特效，通过动画效果让两个白色与蓝色的渐变色块无限循环地在一个容器内移动，就可以形成水波效果。需要注意的是，该代码需要在浏览器支持 CSS3 属性的前提下才能正常运作。

此外，大家还可以通过 CSS3 实现许多其他的水特效，比如水滴效果、流动水效果等等。在实现过程中需要格外注意细节，比如背景色、透明度、动画时间等等，才能让特效达到最佳效果。