渐变流动背景 · 背景
前端Wiki/CSS 特效合集/渐变流动背景

渐变流动背景

多色渐变缓慢游走,零图片零 JS 的动态背景

← 返回 背景 类特效列表

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

CSS 代码

CSS
.fx .flow-bg{height:220px;border-radius:14px;margin:20px auto;background:linear-gradient(120deg,#4a9eff,#a371f7,#f778ba,#57ab5a);background-size:300% 300%;animation:kfx-bgFlow 16s ease infinite}
@keyframes kfx-bgFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

HTML 结构

HTML
<div class="fx">
<div class="flow-bg"></div>
</div>
实现要点:流动背景 = 300% 多色渐变 + 缓速移动 background-position

其它背景类特效

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