CSS3实现水波效果

实现思路：利用伪类实现，伪类内容和背景图片一样，利用animation动画实现伪类的水波效果，而水波荡漾时最关键的就是：

1. 像用放大镜看一样，因此，需先将图片长宽缩小后将其用放大镜即scale放大，逐渐增加其大小（此时仍小于原图）并减小其scale（此时scale仍大于1，因为实现的效果仍然是放大后的效果），最终将其大小和scale都设置成最初的大小。
2. 水波荡漾时是从最中间开始由小变大的，所以在设置动画时，需要将伪类位置设置在水平垂直居中的位置。用

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

实现。

页面结构

<div class="scale">
    <div class="inner"></div>
</div>

样式

.scale{
            position: relative;
            border-radius:50%;
            width: 260px;
            height: 260px;
            top:300px;
            left: 300px;
            background-color: #1D8FEE;
            padding: 20px;
        }
        .inner{
            border-radius:50%;
            position: absolute;
            width: 240px;
            height: 240px;
            background: radial-gradient(yellow 30% , red 80% ,blue);
            animation:ani 10s linear infinite;
        }
        @keyframes ani {
            0% {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(1.4);
                width: 30px;
                height: 30px;
            }
            30% {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(1.3);
                width: 80px;
                height: 80px;

            }
            70% {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(1.2);
                width: 150px;
                height: 150px;

            }
            100% {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(1);
                width: 240px;
                height: 240px;
            }
        }