缩放入场 · 入场与交互动画
前端Wiki/CSS 特效合集/缩放入场

缩放入场

从 30% 大小弹入到原尺寸,适用最广的入场动画

← 返回 入场与交互动画 类特效列表
缩放入场

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS
.fx .zmi{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;animation:kfx-zoom 1s ease both}
.fx:hover .zmi{animation:kfx-zoom 1s ease both}
@keyframes kfx-zoom{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

HTML 结构

HTML
<div class="fx">
<div class="zmi">缩放入场</div>
</div>
实现要点:scale(.3→1) + 透明度;与任何元素百搭

其它入场与交互动画类特效

回到 前端Wiki 首页 · CSS 特效合集