悬停时像果冻一样左右挤压回弹
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .jlo{width:120px;height:80px;margin:56px auto;border-radius:16px;background:linear-gradient(135deg,#f778ba,#e78a3e);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.fx:hover .jlo{animation:kfx-jello 1s ease-in-out}
@keyframes kfx-jello{from,to{transform:translate3d(0,0,0)}30%{transform:skewX(-12deg) skewY(-12deg)}40%{transform:skewX(6deg) skewY(6deg)}50%{transform:skewX(-4deg) skewY(-4deg)}60%{transform:skewX(2deg) skewY(2deg)}75%{transform:skewX(-1deg) skewY(-1deg)}}<div class="fx">
<div class="jlo">悬停果冻</div>
</div>