条纹流动背景 · 背景
前端Wiki/CSS 特效合集/条纹流动背景

条纹流动背景

双色斜条向右持续流动，简洁百搭的动态纹理

← 返回 背景 类特效列表

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

CSS 代码

CSS
.fx .str{height:220px;border-radius:14px;background:repeating-linear-gradient(45deg,#4a9eff 0 24px,#161b22 24px 48px);animation:kfx-str 3s linear infinite}
@keyframes kfx-str{to{background-position:68px 0}}

HTML 结构

HTML
<div class="fx">
<div class="str"></div>
</div>
实现要点：repeating-linear-gradient + background-position 平移循环

其它背景类特效

背景渐变流动背景背景闪烁星空背景背景网格科技背景背景极光背景背景气泡浮动背景背景代码雨背景
回到 前端Wiki 首页 · CSS 特效合集