實現思路：利用偽類實現，偽類內容和背景圖片一樣，利用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;
            }
        }