其他分享
首页 > 其他分享> > 前端HTML+CSS查漏补缺——2021-7月上旬

前端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