CSS3火车头移动特效-优快云博客

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

<!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;
background: #87CEEB;
overflow: hidden;
font-family: Arial, sans-serif;
}

.scene {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

.ground {
position: absolute;
bottom: 0;
width: 300%;
height: 100px;
background: linear-gradient(to right, #8B4513, #A0522D, #8B4513);
animation: groundMove 20s linear infinite;
}

.rail {
position: absolute;
bottom: 50px;
width: 300%;
height: 10px;
background: #333;
animation: groundMove 20s linear infinite;
}

.rail::before,
.rail::after {
content: '';
position: absolute;
width: 100%;
height: 5px;
background: #999;
}

.rail::before {
top: -10px;
}

.rail::after {
bottom: -10px;
}

.train {
position: absolute;
bottom: 100px;
left: 20%;
width: 200px;
height: 100px;
animation: trainMove 10s linear infinite;
}

.locomotive {
position: relative;
width: 180px;
height: 100px;
background: #FF0000;
border-radius: 20px 20px 0 0;
}

.locomotive::before {
content: '';
position: absolute;
top: -30px;
left: 20px;
width: 40px;
height: 40px;
background: #333;
border-radius: 50%;
}

.locomotive::after {
content: '';
position: absolute;
top: -20px;
left: 70px;
width: 80px;
height: 30px;
background: #333;
border-radius: 5px;
}

.window {
position: absolute;
top: 20px;
left: 30px;
width: 40px;
height: 30px;
background: #87CEEB;
border-radius: 5px;
}

.wheel {
position: absolute;
bottom: -15px;
width: 30px;
height: 30px;
background: #333;
border-radius: 50%;
animation: wheelRotate 1s linear infinite;
}

.wheel.front {
left: 30px;
}

.wheel.back {
right: 30px;
}

.smoke {
position: absolute;
top: -50px;
left: 30px;
width: 20px;
height: 20px;
background: #FFF;
border-radius: 50%;
opacity: 0;
animation: smoke 3s linear infinite;
}

.smoke:nth-child(2) {
animation-delay: 0.5s;
}

.smoke:nth-child(3) {
animation-delay: 1s;
}

.cloud {
position: absolute;
background: #FFF;
border-radius: 50%;
opacity: 0.8;
animation: cloudMove 60s linear infinite;
}

.cloud1 {
top: 50px;
left: 10%;
width: 100px;
height: 60px;
animation-delay: 0s;
}

.cloud2 {
top: 100px;
left: 40%;
width: 150px;
height: 80px;
animation-delay: 10s;
}

.cloud3 {
top: 70px;
left: 70%;
width: 120px;
height: 70px;
animation-delay: 20s;
}

.link {
position: absolute;
bottom: 20px;
right: 20px;
color: #333;
text-decoration: none;
font-size: 14px;
}

@keyframes groundMove {
0% { transform: translateX(0); }
100% { transform: translateX(-66.666%); }
}

@keyframes trainMove {
0% { transform: translateX(0); }
100% { transform: translateX(100vw); }
}

@keyframes wheelRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@keyframes smoke {
0% {
transform: translateY(0) scale(1);
opacity: 0;
}
20% {
opacity: 0.8;
}
100% {
transform: translateY(-100px) scale(3);
opacity: 0;
}
}

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

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

<div class="train">
<div class="locomotive">
<div class="window"></div>
<div class="wheel front"></div>
<div class="wheel back"></div>
<div class="smoke"></div>
<div class="smoke"></div>
<div class="smoke"></div>
</div>
</div>


</div>
</body>
</html>