声波 / 地图波纹:
由一个点, 几个圈圈组成.
圈有共同的. ripple-base 设置初始时, 压缩率 transform:scale(0.01);
动画 ripple 设置 100% 时恢复原来大小
每个圈使用动画 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
来源: http://www.bubuko.com/infodetail-3798842.html