视差滚动背景 · 入场与交互动画
前端Wiki/CSS 特效合集/视差滚动背景

视差滚动背景

滚动页面时背景相对内容不动,空间感拉满

← 返回 入场与交互动画 类特效列表
背景"不动" = 视差

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

CSS 代码

CSS
.fx .para{height:170px;margin:12px auto;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.45)),linear-gradient(135deg,#a371f7,#4a9eff 60%,#57ab5a);background-size:cover;background-position:center;background-attachment:fixed}

HTML 结构

HTML
<div class="fx">
<div class="para">背景"不动" = 视差</div>
</div>
实现要点:最简视差 = background-attachment: fixed

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

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