上下浮动 · 入场与交互动画
前端Wiki/CSS 特效合集/上下浮动

上下浮动

永续的上下浮动,像悬空漂浮的 UI 元素

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

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

CSS 代码

CSS
.fx .flt{width:120px;height:80px;margin:52px auto;border-radius:12px;background:linear-gradient(135deg,#4a9eff,#a371f7);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;animation:kfx-float 2.5s ease-in-out infinite;box-shadow:0 12px 24px rgba(74,158,255,.25)}
@keyframes kfx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

HTML 结构

HTML
<div class="fx">
<div class="flt">浮动</div>
</div>
实现要点:translateY 正弦循环,默认就在播放

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

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