亲们好，最近捣鼓 CSS 动画的时候，发现了一个超有意思的小效果 —— 无限楼梯动画。不用一行 JavaScript，只靠 CSS 的 @keyframes 和自定义属性，就能做出视觉上无限延伸的楼梯效果，既简单又治愈。
这个效果的核心其实是利用 CSS 动画的位移和视觉欺骗，配合自定义属性来批量生成楼梯的层级，整体实现起来不难，新手也能跟着做。做好之后放在页面里，不管是当小彩蛋还是练手，都超合适。下面就把完整的代码和详细注释分享出来。
完整源码（附详细注释）
HTML 部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 适配移动端，保证动画在手机端正常展示 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无限楼梯CSS动画效果</title><!-- 引入外部样式文件，分离结构与样式 --><link rel="stylesheet" href="./style.css">
</head>
<body><!-- 外层窗口容器：限定动画展示范围，模拟可视化窗口 --><div class="window"><!-- 楼梯容器：承载所有楼梯层级，是动画的核心载体 --><div class="stair"><!-- 10个span分别对应一级楼梯，通过自定义属性--i区分层级 --><span style="--i: 1;"></span><span style="--i: 2;"></span><span style="--i: 3;"></span><span style="--i: 4;"></span><span style="--i: 5;"></span><span style="--i: 6;"></span><span style="--i: 7"></span><span style="--i: 8;"></span><span style="--i: 9;"></span><span style="--i: 10;"></span></div></div>
</body>
</html>
CSS 部分
/* 全局样式重置：清除浏览器默认边距/内边距，统一盒模型 */
*{margin: 0;padding: 0;box-sizing: border-box;
}/* 页面主体样式：让窗口居中展示，设置背景色营造整体视觉氛围 */
body {display: flex;justify-content: center;align-items: center;min-height: 100vh; /* 让body铺满整个视口高度 */background: #114b64; /* 主色调，与楼梯颜色呼应 */
}/* 窗口容器：模拟圆润的展示窗口，限定动画可视范围 */
.window {position: relative; /* 为内部绝对定位的元素提供参考 */width: 340px;height: 480px;background: #fff; /* 窗口背景为白色，突出楼梯主体 */border-radius: 170px; /* 大圆角营造圆润的窗口质感 */border: 4px solid #114b64; /* 外边框与主色调一致，增加层次感 */box-shadow: 0 0 0 12px #fff; /* 外层白色阴影，强化窗口轮廓 */overflow: hidden; /* 隐藏超出窗口的内容，实现视觉截断，打造无限感 */
}/* 窗口装饰红点：模拟指示灯，增加动画生动感 */
.window::before{content:""; /* 伪元素必须设置content属性 */position: absolute;top: 190px;left: calc(50% + 45px); /* 精准定位，居中偏右 */width: 30px;height: 30px;border-radius: 50%; /* 设置为圆形 */background: #f44336; /* 红色醒目，提升视觉亮点 *//* 红点弹跳动画：ease-in-out让弹跳更自然，infinite循环播放 */animation: bounce 1s ease-in-out infinite;
}/* 定义红点的弹跳动画关键帧 */
@keyframes bounce{0%,100%{ /* 动画起始/结束状态：轻微上移 */transform: translateY(-1px);}50%{ /* 动画中间状态：向下弹跳，形成起伏效果 */transform: translateY(-40px);}
}/* 楼梯容器：承载所有楼梯层级，负责整体位移动画 */
.window .stair {position: absolute;width: 100%;right: calc(-100% + 0px); /* 初始位置偏右，为位移动画预留空间 */top: 100px; /* 垂直定位，让楼梯从窗口上方开始展示 *//* 楼梯整体位移动画：linear匀速播放，infinite循环实现“无限”效果 */animation: stairs 1s linear infinite;
}/* 定义楼梯容器的位移动画：核心的无限楼梯视觉效果 */
@keyframes stairs {0% { /* 动画起始状态：无位移 */transform: translateX(0) translateY(0);}100% { /* 动画结束状态：向右+向上位移，模拟楼梯向上延伸 */transform: translateX(40px) translateY(-40px);}
}/* 单个楼梯层级样式：通过自定义属性--i控制位置，形成阶梯排列 */
.window .stair span {position: absolute;/* 垂直位置：每个楼梯层级间隔40px，--i为1~10，实现垂直分层 */top: calc(var(--i ) * 40px);/* 水平位置：与垂直方向对应，形成斜向楼梯的视觉效果 */right: calc(var(--i ) * 40px);width: 100%;min-height: 40px; /* 楼梯的高度，保证层级明显 */background: #114b64; /* 楼梯颜色与主色调一致，视觉统一 */border-bottom: 4px solid #fff; /* 白色底边，区分每个楼梯层级 */border-top-left-radius: 6px; /* 左上角圆角，让楼梯边角更柔和 */
}
是不是超简单？整个效果的关键就在于.stair的位移动画，配合每个 span 通过--i自定义属性的位置计算，再加上overflow: hidden的视觉截断，就营造出了 “无限楼梯” 的效果。
大家可以试着修改一下颜色、动画时长或者楼梯的高度，看看能调出什么不一样的效果～如果有其他好玩的 CSS 小动画想法，也欢迎在评论区聊聊。
本文由mdnice多平台发布