悬停时水面波纹从中心向外扩散，宁静而有活力
← 返回 卡片 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .ww{position:relative;width:230px;height:150px;margin:36px auto;border-radius:14px;background:#0d2b3e;display:flex;align-items:center;justify-content:center;color:#9fd8ff;font-weight:700;overflow:hidden}
.fx .ww::before,.fx .ww::after{content:"";position:absolute;width:90px;height:90px;border:2px solid rgba(74,158,255,.6);border-radius:50%;opacity:0}
.fx .ww:hover::before{animation:kfx-wr 1.4s ease-out infinite}
.fx .ww:hover::after{animation:kfx-wr 1.4s .5s ease-out infinite}
@keyframes kfx-wr{from{transform:scale(.2);opacity:.8}to{transform:scale(2.6);opacity:0}}<div class="fx">
<div class="ww">悬停看水波</div>
</div>