悬停时像钟摆一样左右摇摆后归位
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .swg{width:120px;height:80px;margin:50px auto 40px;border-radius:12px;background:linear-gradient(135deg,#57ab5a,#4a9eff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;transform-origin:top center}
.fx:hover .swg{animation:kfx-swing 1s ease-in-out}
@keyframes kfx-swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0)}}<div class="fx">
<div class="swg">悬停摇摆</div>
</div>