css怎么做水波纹

CSS是开发前端页面常用的一种样式语言，十分强大。其中，水波纹效果是很酷的一个效果，下面我们就来看看CSS怎么做水波纹。

.wave {
    width: 150px;
    height: 150px;
    position: relative;
    margin: 30px auto;
    background-color: #4BC0C0;
    border-radius: 50%;
}
.wave:before,.wave:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    top: 0;
    left: 0;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.wave:before {
    width: 200px;
    height: 200px;
    margin-top: -25px;
    margin-left: -25px;
    animation-name: waveBefore;
}
.wave:after {
    width: 150px;
    height: 150px;
    margin-top: -75px;
    margin-left: -75px;
    animation-name: waveAfter;
}
@keyframes waveAfter {
0% {
    transform: scale(0.9);
    opacity: 1;
}
100% {
    transform: scale(2);
    opacity: 0;
}
}
@keyframes waveBefore {
0% {
    transform: scale(0.9);
    opacity: 0.7;
}
100% {
    transform: scale(2);
    opacity: 0;
}
}
    

上述代码主要涉及到CSS3里的两个属性：animation和transform。animation控制动画，我们在before和after伪类中分别设置了动画名称、时间和循环次数。transform控制元素的形态和位置，通过设置scale（放大倍数）来实现水波纹效果的视觉效果。

在这个例子中，我们通过before和after伪类来实现水波纹的效果，before用来扩散，after用来消失。通过不同的动画名称实现两个动画的不同效果。

在HTML中，我们可以这样写：

这个例子中的wave类可以用来承载水波纹效果。

在实际项目中，我们可以通过设置不同的颜色和大小来实现多样化的水波纹效果。CSS是非常灵活的样式语言，希望本文能够为大家提供一些帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！