棋盘移动背景 · 背景
前端Wiki/CSS 特效合集/棋盘移动背景

棋盘移动背景

黑白棋盘格沿对角缓慢漂移,催眠系纹理

← 返回 背景 类特效列表

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

CSS 代码

CSS
.fx .chk{height:220px;border-radius:14px;background:conic-gradient(#e6edf3 90deg,#161b22 90deg 180deg,#e6edf3 180deg 270deg,#161b22 270deg);background-size:36px 36px;animation:kfx-chk 6s linear infinite}
@keyframes kfx-chk{to{background-position:36px 36px}}

HTML 结构

HTML
<div class="fx">
<div class="chk"></div>
</div>
实现要点:conic-gradient 四分格 + background-size 定格 + 位移动画

其它背景类特效

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