两块内容以缩放消隐的方式互换，magic.css 的 swap
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .swp{position:relative;width:150px;height:90px;margin:52px auto;cursor:pointer}
.fx .swp .s1,.fx .swp .s2{position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;transition:transform .45s ease,opacity .45s ease}
.fx .swp .s1{background:linear-gradient(135deg,#4a9eff,#57ab5a)}
.fx .swp .s2{background:linear-gradient(135deg,#f778ba,#e5534b);transform:scale(0);opacity:0}
.fx .swp:hover .s1{transform:scale(0);opacity:0}
.fx .swp:hover .s2{transform:scale(1);opacity:1}<div class="fx">
<div class="swp"><div class="s1">旧内容</div><div class="s2">新内容</div></div>
</div>