CSS3卡通大象走路动画

最新推荐文章于 2025-07-13 17:26:59 发布

ziblog

最新推荐文章于 2025-07-13 17:26:59 发布

阅读量570

点赞数 16

CC 4.0 BY-SA版权

文章标签： css css3 html

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3卡通大象走路动画</title>
<style>
body {
background-color: #87CEEB;
overflow: hidden;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
}

.scene {
position: relative;
width: 100%;
height: 300px;
}

.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: #8B4513;
}

.elephant {
position: absolute;
bottom: 50px;
left: -200px;
animation: walk 10s linear infinite;
}

.body {
position: relative;
width: 150px;
height: 100px;
background-color: #888;
border-radius: 50% 50% 45% 45%;
}

.head {
position: absolute;
top: -30px;
left: -40px;
width: 80px;
height: 60px;
background-color: #888;
border-radius: 50%;
}

.trunk {
position: absolute;
top: 20px;
left: -30px;
width: 50px;
height: 20px;
background-color: #888;
border-radius: 10px;
transform-origin: right center;
animation: trunkMove 2s ease-in-out infinite;
}

.ear {
position: absolute;
top: -10px;
left: -20px;
width: 40px;
height: 30px;
background-color: #777;
border-radius: 50%;
}

.eye {
position: absolute;
top: 15px;
left: 10px;
width: 8px;
height: 8px;
background-color: #000;
border-radius: 50%;
}

.leg {
position: absolute;
bottom: -30px;
width: 20px;
height: 40px;
background-color: #777;
border-radius: 10px;
}

.leg.front-left {
left: 20px;
animation: legMoveFront 2s ease-in-out infinite;
}

.leg.front-right {
left: 50px;
animation: legMoveFront 2s ease-in-out infinite reverse;
}

.leg.back-left {
left: 90px;
animation: legMoveBack 2s ease-in-out infinite;
}

.leg.back-right {
left: 120px;
animation: legMoveBack 2s ease-in-out infinite reverse;
}

.tail {
position: absolute;
top: 30px;
right: -10px;
width: 30px;
height: 5px;
background-color: #888;
border-radius: 5px;
transform-origin: left center;
animation: tailMove 2s ease-in-out infinite;
}

@keyframes walk {
0% {
transform: translateX(-200px);
}
100% {
transform: translateX(calc(100vw + 200px));
}
}

@keyframes trunkMove {
0%, 100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}

@keyframes legMoveFront {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

@keyframes legMoveBack {
0%, 100% {
transform: translateY(-10px);
}
50% {
transform: translateY(10px);
}
}

@keyframes tailMove {
0%, 100% {
transform: rotate(-20deg);
}
50% {
transform: rotate(20deg);
}
}

.cloud {
position: absolute;
background-color: white;
border-radius: 50%;
opacity: 0.8;
}

.cloud1 {
top: 50px;
left: 20%;
width: 60px;
height: 30px;
animation: cloudMove 30s linear infinite;
}

.cloud2 {
top: 80px;
left: 40%;
width: 80px;
height: 40px;
animation: cloudMove 40s linear infinite;
}

.cloud3 {
top: 30px;
left: 70%;
width: 100px;
height: 50px;
animation: cloudMove 50s linear infinite;
}

@keyframes cloudMove {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100px);
}
}
</style>
</head>
<body>
<div class="scene">
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="cloud cloud3"></div>

<div class="elephant">
<div class="body">
<div class="head">
<div class="ear"></div>
<div class="eye"></div>
<div class="trunk"></div>
</div>
<div class="leg front-left"></div>
<div class="leg front-right"></div>
<div class="leg back-left"></div>
<div class="leg back-right"></div>
<div class="tail"></div>
</div>
</div>

<div class="ground"></div>
</div>

<div style="position: fixed; bottom: 10px; right: 10px; font-size: 12px; color: #888;">
<a href="https://a.88a.org.cn/OogV" target="_blank" style="color: inherit; text-decoration: none;">Animation Source</a>
</div>
</body>
</html>