棋盘错觉动画是一种利用人眼视觉暂留和对比效果产生的特殊视觉现象，通过交替变换棋盘格的颜色和位置，会让静态的棋盘看起来像是在不断流动或者旋转，这种效果仅用CSS就能完整实现，不需要引入任何JavaScript脚本。
基础棋盘布局搭建
首先我们需要创建一个标准的8x8棋盘结构，这里使用无序列表来构建棋盘的格子，每个列表项代表一个棋盘格。
<div class="chessboard">
<ul class="board-grid">
<!-- 这里通过CSS伪元素生成64个格子，减少HTML冗余代码 -->
</ul>
</div>
接下来通过CSS设置棋盘的基础样式，这里用grid布局来快速实现8x8的格子排列，不需要手动写64个列表项：
.chessboard {
width: 400px;
height: 400px;
margin: 50px auto;
background-color: #f0f0f0;
overflow: hidden;
}
.board-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
width: 100%;
height: 100%;
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
/* 生成棋盘格子的伪元素 */
.board-grid::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
/* 用背景渐变生成棋盘基础纹理 */
background-image:
linear-gradient(45deg, #333 25%, transparent 25%),
linear-gradient(-45deg, #333 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #333 75%),
linear-gradient(-45deg, transparent 75%, #333 75%);
background-size: 50px 50px;
background-position: 0 0, 0 25px, 25px -25px, -25px 0px;
}
错觉动画的核心实现逻辑
棋盘错觉的核心是让格子的颜色和位置产生交替变化，这里我们用@keyframes定义动画关键帧，通过控制背景的位置和颜色透明度来模拟流动效果。
首先定义动画关键帧，让棋盘的背景位置循环移动，同时调整部分区域的透明度，产生视觉上的流动错觉：
@keyframes chessboard-illusion {
0% {
background-position: 0 0, 0 25px, 25px -25px, -25px 0px;
opacity: 1;
}
25% {
background-position: 25px 0, 25px 25px, 50px -25px, 0px 0px;
opacity: 0.9;
}
50% {
background-position: 50px 0, 50px 25px, 75px -25px, 25px 0px;
opacity: 1;
}
75% {
background-position: 25px 0, 25px 25px, 50px -25px, 0px 0px;
opacity: 0.9;
}
100% {
background-position: 0 0, 0 25px, 25px -25px, -25px 0px;
opacity: 1;
}
}
然后将动画绑定到棋盘容器上，设置无限循环和合适的动画时长：
.board-grid::before {
/* 之前的背景属性保留 */
background-image:
linear-gradient(45deg, #333 25%, transparent 25%),
linear-gradient(-45deg, #333 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #333 75%),
linear-gradient(-45deg, transparent 75%, #333 75%);
background-size: 50px 50px;
background-position: 0 0, 0 25px, 25px -25px, -25px 0px;
/* 绑定动画 */
animation: chessboard-illusion 4s linear infinite;
}
优化动画效果的细节
如果想要错觉效果更明显，可以增加格子颜色的对比度，或者添加第二层动画，让不同区域的格子变化节奏不同：
/* 添加第二层棋盘纹理，增强错觉效果 */
.board-grid::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image:
linear-gradient(45deg, #fff 25%, transparent 25%),
linear-gradient(-45deg, #fff 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #fff 75%),
linear-gradient(-45deg, transparent 75%, #fff 75%);
background-size: 50px 50px;
background-position: 25px 25px, 25px 50px, 50px 0px, 0px 25px;
animation: chessboard-illusion 4s linear infinite reverse;
opacity: 0.7;
}
完整可运行源码
以下是整合了所有代码的完整示例，直接复制到HTML文件中即可运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS棋盘错觉动画</title>
<style>
.chessboard {
width: 400px;
height: 400px;
margin: 50px auto;
background-color: #f0f0f0;
overflow: hidden;
}
.board-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
width: 100%;
height: 100%;
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
@keyframes chessboard-illusion {
0% {
background-position: 0 0, 0 25px, 25px -25px, -25px 0px;
opacity: 1;
}
25% {
background-position: 25px 0, 25px 25px, 50px -25px, 0px 0px;
opacity: 0.9;
}
50% {
background-position: 50px 0, 50px 25px, 75px -25px, 25px 0px;
opacity: 1;
}
75% {
background-position: 25px 0, 25px 25px, 50px -25px, 0px 0px;
opacity: 0.9;
}
100% {
background-position: 0 0, 0 25px, 25px -25px, -25px 0px;
opacity: 1;
}
}
.board-grid::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image:
linear-gradient(45deg, #333 25%, transparent 25%),
linear-gradient(-45deg, #333 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #333 75%),
linear-gradient(-45deg, transparent 75%, #333 75%);
background-size: 50px 50px;
background-position: 0 0, 0 25px, 25px -25px, -25px 0px;
animation: chessboard-illusion 4s linear infinite;
}
.board-grid::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image:
linear-gradient(45deg, #fff 25%, transparent 25%),
linear-gradient(-45deg, #fff 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #fff 75%),
linear-gradient(-45deg, transparent 75%, #fff 75%);
background-size: 50px 50px;
background-position: 25px 25px, 25px 50px, 50px 0px, 0px 25px;
animation: chessboard-illusion 4s linear infinite reverse;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="chessboard">
<ul class="board-grid"></ul>
</div>
</body>
</html>
这种实现方式没有使用任何JavaScript代码，完全依赖CSS的动画和背景属性，性能表现很好，也可以很方便地调整棋盘大小、动画速度和颜色，满足不同的视觉需求。