标签：查漏 4500ms infinite HTML 2021 ripple position height border

声波/地图波纹：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。