悬停时高频微震,Hover.css 的 buzz 效果
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .bzz{width:120px;height:80px;margin:56px auto;border-radius:12px;background:linear-gradient(135deg,#4a9eff,#57ab5a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.fx:hover .bzz{animation:kfx-buzz .15s linear infinite}
@keyframes kfx-buzz{25%{transform:translateX(-2px) rotate(-2deg)}75%{transform:translateX(2px) rotate(2deg)}}<div class="fx">
<div class="bzz">悬停震颤</div>
</div>