纯CSS3逼真的楼梯动画特效-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3逼真的楼梯动画特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
overflow: hidden;
font-family: Arial, sans-serif;
perspective: 1000px;
}

.staircase {
position: relative;
width: 300px;
height: 500px;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(45deg);
animation: rotateStairs 20s infinite linear;
}

.step {
position: absolute;
width: 200px;
height: 40px;
background: #e0c097;
transform-style: preserve-3d;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.step::before {
content: '';
position: absolute;
width: 200px;
height: 20px;
background: #c9a87a;
transform-origin: top;
transform: rotateX(-90deg);
bottom: -20px;
}

.step::after {
content: '';
position: absolute;
width: 20px;
height: 40px;
background: #b08e60;
right: -20px;
transform-origin: left;
transform: rotateY(90deg);
}

/* 创建10级台阶 */
.step:nth-child(1) { transform: translateZ(0px); }
.step:nth-child(2) { transform: translateZ(40px) translateY(-40px); }
.step:nth-child(3) { transform: translateZ(80px) translateY(-80px); }
.step:nth-child(4) { transform: translateZ(120px) translateY(-120px); }
.step:nth-child(5) { transform: translateZ(160px) translateY(-160px); }
.step:nth-child(6) { transform: translateZ(200px) translateY(-200px); }
.step:nth-child(7) { transform: translateZ(240px) translateY(-240px); }
.step:nth-child(8) { transform: translateZ(280px) translateY(-280px); }
.step:nth-child(9) { transform: translateZ(320px) translateY(-320px); }
.step:nth-child(10) { transform: translateZ(360px) translateY(-360px); }

/* 添加扶手 */
.railing {
position: absolute;
width: 10px;
height: 420px;
background: #8b7355;
transform-style: preserve-3d;
left: 50px;
top: 0;
transform: rotateY(90deg) translateZ(200px) translateY(40px);
}

.railing::before {
content: '';
position: absolute;
width: 10px;
height: 420px;
background: #8b7355;
transform: translateZ(10px);
}

.railing::after {
content: '';
position: absolute;
width: 10px;
height: 420px;
background: #8b7355;
transform: translateZ(-10px);
}

/* 添加栏杆支柱 */
.baluster {
position: absolute;
width: 5px;
height: 40px;
background: #8b7355;
transform-style: preserve-3d;
left: 50px;
}

.baluster::before {
content: '';
position: absolute;
width: 5px;
height: 40px;
background: #8b7355;
transform: translateZ(5px);
}

.baluster::after {
content: '';
position: absolute;
width: 5px;
height: 40px;
background: #8b7355;
transform: translateZ(-5px);
}

/* 定位栏杆支柱 */
.baluster:nth-child(11) { transform: translateZ(0px) translateY(0px); }
.baluster:nth-child(12) { transform: translateZ(40px) translateY(-40px); }
.baluster:nth-child(13) { transform: translateZ(80px) translateY(-80px); }
.baluster:nth-child(14) { transform: translateZ(120px) translateY(-120px); }
.baluster:nth-child(15) { transform: translateZ(160px) translateY(-160px); }
.baluster:nth-child(16) { transform: translateZ(200px) translateY(-200px); }
.baluster:nth-child(17) { transform: translateZ(240px) translateY(-240px); }
.baluster:nth-child(18) { transform: translateZ(280px) translateY(-280px); }
.baluster:nth-child(19) { transform: translateZ(320px) translateY(-320px); }
.baluster:nth-child(20) { transform: translateZ(360px) translateY(-360px); }

/* 添加人物动画 */
.person {
position: absolute;
width: 20px;
height: 40px;
background: #ff4757;
transform-style: preserve-3d;
left: 100px;
top: 50%;
animation: climbStairs 10s infinite linear;
}

.person::before {
content: '';
position: absolute;
width: 20px;
height: 40px;
background: #ff4757;
transform: translateZ(5px);
}

.person::after {
content: '';
position: absolute;
width: 20px;
height: 40px;
background: #ff4757;
transform: translateZ(-5px);
}

/* 动画定义 */
@keyframes rotateStairs {
0% {
transform: rotateX(60deg) rotateZ(45deg);
}
50% {
transform: rotateX(60deg) rotateZ(405deg);
}
100% {
transform: rotateX(60deg) rotateZ(45deg);
}
}

@keyframes climbStairs {
0% {
transform: translateZ(0px) translateY(0px);
}
10% {
transform: translateZ(40px) translateY(-40px);
}
20% {
transform: translateZ(80px) translateY(-80px);
}
30% {
transform: translateZ(120px) translateY(-120px);
}
40% {
transform: translateZ(160px) translateY(-160px);
}
50% {
transform: translateZ(200px) translateY(-200px);
}
60% {
transform: translateZ(240px) translateY(-240px);
}
70% {
transform: translateZ(280px) translateY(-280px);
}
80% {
transform: translateZ(320px) translateY(-320px);
}
90% {
transform: translateZ(360px) translateY(-360px);
}
100% {
transform: translateZ(400px) translateY(-400px);
}
}

/* 版权信息 */
.footer {
position: absolute;
bottom: 20px;
right: 20px;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}

.footer a {
color: #ff4757;
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="staircase">

<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>


<div class="railing"></div>


<div class="baluster"></div>
<div class="baluster"></div>
<div class="baluster"></div>
<div class="baluster"></div>
<div class="baluster"></div>
<div class="baluster"></div>
<div class="baluster"></div>
<div class="baluster"></div>
<div class="baluster"></div>
<div class="baluster"></div>


<div class="person"></div>
</div>


</body>
</html>