中心红点持续向外放出涟漪，不急不缓的等待节奏
← 返回 加载 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .pls{height:150px;display:flex;align-items:center;justify-content:center;position:relative}
.fx .pls .c{width:22px;height:22px;border-radius:50%;background:#e5534b}
.fx .pls .c::before,.fx .pls .c::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #e5534b;animation:kfx-pds 2s ease-out infinite}
.fx .pls .c::after{animation-delay:1s}
@keyframes kfx-pds{from{transform:scale(1);opacity:.7}to{transform:scale(3.4);opacity:0}}<div class="fx">
<div class="pls"><div class="c"></div></div>
</div>