从天而降并自旋半圈落定，magic.css 的 twister
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .tws{width:120px;height:80px;margin:56px auto;border-radius:12px;background:linear-gradient(135deg,#a371f7,#f778ba);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;animation:kfx-tw 1.4s ease both}
.fx:hover .tws{animation:kfx-tw 1.4s ease both}
@keyframes kfx-tw{0%{opacity:0;transform:translateY(-110%) rotate(-540deg) scale(2)}30%{opacity:1;transform:translateY(20%) rotate(20deg) scale(1.1)}60%{transform:translateY(-8%) rotate(-10deg) scale(.98)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}<div class="fx">
<div class="tws">twister</div>
</div>