CSS3 3D人物走路动画

最新推荐文章于 2025-07-11 17:30:38 发布

ziblog

最新推荐文章于 2025-07-11 17:30:38 发布

阅读量612

点赞数 10

CC 4.0 BY-SA版权

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148978906

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 3D人物走路动画</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
perspective: 1000px;
overflow: hidden;
}

.character {
position: relative;
width: 100px;
height: 200px;
transform-style: preserve-3d;
animation: walk 1s infinite steps(8);
}

.head {
position: absolute;
width: 60px;
height: 60px;
background: #ffdbac;
border-radius: 50%;
top: 0;
left: 20px;
transform: translateZ(30px);
}

.body {
position: absolute;
width: 60px;
height: 80px;
background: #3498db;
top: 60px;
left: 20px;
transform: translateZ(20px);
border-radius: 10px;
}

.arm-left {
position: absolute;
width: 20px;
height: 70px;
background: #ffdbac;
top: 65px;
left: 0;
transform-origin: top center;
transform: translateZ(25px);
border-radius: 10px;
animation: swing-arm-left 1s infinite;
}

.arm-right {
position: absolute;
width: 20px;
height: 70px;
background: #ffdbac;
top: 65px;
left: 80px;
transform-origin: top center;
transform: translateZ(25px);
border-radius: 10px;
animation: swing-arm-right 1s infinite;
}

.leg-left {
position: absolute;
width: 25px;
height: 80px;
background: #2980b9;
top: 140px;
left: 25px;
transform-origin: top center;
transform: translateZ(15px);
border-radius: 10px;
animation: swing-leg-left 1s infinite;
}

.leg-right {
position: absolute;
width: 25px;
height: 80px;
background: #2980b9;
top: 140px;
left: 55px;
transform-origin: top center;
transform: translateZ(15px);
border-radius: 10px;
animation: swing-leg-right 1s infinite;
}

.eye-left, .eye-right {
position: absolute;
width: 8px;
height: 8px;
background: #000;
border-radius: 50%;
top: 25px;
}

.eye-left {
left: 15px;
}

.eye-right {
left: 37px;
}

@keyframes walk {
0% {
transform: translateX(0) rotateY(0deg);
}
100% {
transform: translateX(100px) rotateY(20deg);
}
}

@keyframes swing-arm-left {
0%, 100% {
transform: translateZ(25px) rotateZ(20deg);
}
50% {
transform: translateZ(25px) rotateZ(-20deg);
}
}

@keyframes swing-arm-right {
0%, 100% {
transform: translateZ(25px) rotateZ(-20deg);
}
50% {
transform: translateZ(25px) rotateZ(20deg);
}
}

@keyframes swing-leg-left {
0%, 100% {
transform: translateZ(15px) rotateZ(-15deg);
}
50% {
transform: translateZ(15px) rotateZ(15deg);
}
}

@keyframes swing-leg-right {
0%, 100% {
transform: translateZ(15px) rotateZ(15deg);
}
50% {
transform: translateZ(15px) rotateZ(-15deg);
}
}

.ground {
position: absolute;
width: 300%;
height: 50px;
background: #555;
bottom: 0;
left: -100%;
transform: rotateX(90deg) translateZ(-25px);
background-image: repeating-linear-gradient(90deg, #555, #555 50px, #666 50px, #666 100px);
animation: move-ground 5s linear infinite;
}

@keyframes move-ground {
0% {
transform: rotateX(90deg) translateZ(-25px) translateX(0);
}
100% {
transform: rotateX(90deg) translateZ(-25px) translateX(-100px);
}
}

.info {
position: fixed;
bottom: 20px;
color: white;
font-family: Arial, sans-serif;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<div class="character">
<div class="head">
<div class="eye-left"></div>
<div class="eye-right"></div>
</div>
<div class="body"></div>
<div class="arm-left"></div>
<div class="arm-right"></div>
<div class="leg-left"></div>
<div class="leg-right"></div>
</div>
<div class="ground"></div>

<div class="info">
更多精彩内容请访问：<a href="https://a.88a.org.cn/9VQC" target="_blank" style="color: #3498db;">点击查看</a>
</div>
</body>
</html>