前端HTML+CSS查漏补缺——2021-7月上旬

声波/地图波纹：

1. 由一个点，几个圈圈组成。
2. 圈有共同的.ripple-base设置初始时，压缩率transform:scale(0.01);
3. 动画ripple设置100%时恢复原来大小
4. 每个圈使用动画ripple，总时间相同4500ms，启动的时间不同，在总时间内均匀错开。动画是永久的infinite。

        .point{
            width: 10px;height: 10px;display: block;
            background-color: #00BFFF;
            border-radius: 50%;
            position: absolute;
        }
        .ripple-base{/*完全的圆被压缩到0.01倍*/
            width: 120px;height: 120px;
            border: 2px solid #9b126d;
            border-radius: 50%;
            transform: scale(0.01);
            position: absolute;
            left: -57px; top: -57px;
        }
        .ripple-1{
            animation: ripple 4500ms 225ms infinite;
        }
        .ripple-2{
            animation: ripple 4500ms 1575ms infinite;
        }
        .ripple-3{
            animation: ripple 4500ms 3000ms infinite;
        }

注意：ripple的中心直接设置top和left值。position不可以遗传，要每个都设置。

犯过的错误：ripple-1前面忘记加.。每个ripple直接复制的时候忘记改序号

outline 不改变width和height

标签：查漏,4500ms,infinite,HTML,2021,ripple,position,height,border
来源： https://www.cnblogs.com/yh-queen/p/15008923.html