如何使用纯CSS实现条纹错觉的动画效果
条纹错觉是视觉心理学中常见的一种现象，平行的条纹在动态变化或特定排列下，会让观察者产生弯曲、波动的错觉。纯CSS就可以实现这类效果，不需要依赖JavaScript，核心思路是通过背景条纹的位移、旋转或者透明度变化来模拟错觉动态效果。下面我们会一步步讲解实现过程，并提供完整的可运行代码。
核心实现原理
要实现条纹错觉的动画，主要依赖以下三个CSS特性：
- 使用
linear-gradient生成重复的条纹背景 - 通过
background-size控制条纹的宽度和重复规则 - 用
@keyframes定义动画，修改背景位置或者元素的旋转角度，产生动态错觉
基础条纹背景实现
首先我们需要生成一组等宽的平行条纹，这里用repeating-linear-gradient可以快速创建重复条纹，比多次叠加渐变更简洁。下面的代码会生成一个黑白相间的条纹背景：
/* 基础条纹容器样式 */
.stripe-box {
width: 400px;
height: 300px;
/* 生成45度角的黑白重复条纹，每条纹宽度20px */
background: repeating-linear-gradient(
45deg,
#000 0px,
#000 20px,
#fff 20px,
#fff 40px
);
/* 设置背景尺寸，保证条纹重复完整 */
background-size: 40px 40px;
}上面的代码中，repeating-linear-gradient从0到20px是黑色，20px到40px是白色，刚好形成一个黑白条纹对，background-size设为40px，刚好对应一个完整条纹对的尺寸，这样背景就会自动重复铺满整个容器。
添加动画产生条纹错觉
条纹静止的时候不会有明显的错觉效果，我们需要让条纹动起来。这里有两种常见的实现方式，分别可以模拟不同的错觉效果。
方式一：背景位移动画
通过动画改变背景的位置，让条纹看起来在移动，配合观察者的视觉暂留，会产生条纹弯曲波动的错觉。代码如下：
/* 带位移动画的条纹容器 */
.stripe-move {
width: 400px;
height: 300px;
background: repeating-linear-gradient(
45deg,
#000 0px,
#000 20px,
#fff 20px,
#fff 40px
);
background-size: 40px 40px;
/* 应用动画 */
animation: stripeShift 2s linear infinite;
}
/* 定义位移动画 */
@keyframes stripeShift {
0% {
background-position: 0 0;
}
100% {
/* 水平垂直各移动40px，刚好一个条纹对的尺寸，动画循环更平滑 */
background-position: 40px 40px;
}
}这个动画会让条纹沿着45度方向匀速移动，观察的时候会感觉条纹在流动，甚至出现轻微的弯曲错觉。
方式二：旋转动画配合条纹
如果让条纹容器做缓慢旋转，静止的条纹会因为旋转产生更强烈的波动错觉，这种方式实现的错觉效果更明显。代码如下：
/* 带旋转动画的条纹容器 */
.stripe-rotate {
width: 400px;
height: 400px;
background: repeating-linear-gradient(
0deg,
#000 0px,
#000 10px,
#fff 10px,
#fff 20px
);
background-size: 20px 20px;
/* 应用旋转动画 */
animation: stripeSpin 8s linear infinite;
}
/* 定义旋转动画 */
@keyframes stripeSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}这里我们把条纹做成垂直方向，容器做360度无限旋转，旋转过程中垂直的条纹会看起来像在波动变形， illusions效果会更强。
完整示例页面
下面是一个完整的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>
body {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding: 40px;
background-color: #f5f5f5;
font-family: "Microsoft YaHei", sans-serif;
}
.demo-title {
font-size: 20px;
color: #333;
margin-bottom: 10px;
}
/* 位移动画样式 */
.stripe-move {
width: 400px;
height: 300px;
background: repeating-linear-gradient(
45deg,
#000 0px,
#000 20px,
#fff 20px,
#fff 40px
);
background-size: 40px 40px;
animation: stripeShift 2s linear infinite;
}
@keyframes stripeShift {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 40px;
}
}
/* 旋转动画样式 */
.stripe-rotate {
width: 400px;
height: 400px;
background: repeating-linear-gradient(
0deg,
#000 0px,
#000 10px,
#fff 10px,
#fff 20px
);
background-size: 20px 20px;
animation: stripeSpin 8s linear infinite;
}
@keyframes stripeSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div>
<div class="demo-title">位移条纹错觉效果</div>
<div class="stripe-move"></div>
</div>
<div>
<div class="demo-title">旋转条纹错觉效果</div>
<div class="stripe-rotate"></div>
</div>
</body>
</html>优化建议
如果想要让错觉效果更明显，可以调整以下几个参数：
- 调整条纹的宽度，更细的条纹产生的错觉效果通常更强烈
- 修改动画的时长，更快的位移或者更慢的旋转都会带来不同的视觉感受
- 可以尝试添加第三、第四种颜色，或者调整条纹的倾斜角度，组合出更多样的错觉效果
- 如果需要兼容旧版浏览器，可以添加
-webkit-、-moz-等前缀适配动画属性
纯CSS实现条纹错觉的优势在于性能更好，不需要额外的脚本资源，只需要几行CSS代码就可以实现有趣的视觉效果，适合用在页面加载动画、装饰性元素等场景中。