css3之实现水波纹效果

1、纯css实现水波纹效果

这里主要是利用css3 一直旋转一个有弧度的正方形实现的

上代码：

<div class="wave-box">
    <div class="wave"></div>
</div>

.wave_box {
    position: relative;
    border: 1px solid silver;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    animation: water-wave linear infinite;
}
.wave {
    position: absolute;
    top: 60%;
    left: -55%;
    background: #33cfff;
    opacity: .6;
    width: 200%;
    height: 200%;
    border-radius: 40%;
    animation: inherit;
    animation-duration: 5s;
}
@keyframes  water-wave{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
 }

　　

2、循环推动一张海浪图实现水波纹效果

<div class="wavensvg">
    <div class="waven"></div>
<div>

.wavensvg {
    width: 168px;
    height: 168px;
    overflow: hidden;
    position: relative;
}
 .waven {
    width: 408px;
    height: 80%;
    position: absolute;
    left: 0px;
    bottom: 0;
    background: url('../images/images/wave.png') no-repeat;
    animation: move_wave 1s linear infinite;
}
@keyframes move_wave {
    0% {
        transform: translateX(0)
    }
    50% {
        transform: translateX(-25%)
    }
    100% {
        transform: translateX(-50%)
    }
}