纯 CSS 实现无限楼梯动画效果，视觉欺骗也能这么好玩

亲们好，最近捣鼓 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多平台发布

posted on 2026-02-11 10:41 Silvana 阅读(18) 评论(0) 收藏举报

刷新页面返回顶部