游乐园跑动的小火车

原创已于 2025-06-28 10:18:10 修改 · 868 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-27 16:36:02 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>游乐园跑动的小火车</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
height: 100vh;
font-family: Arial, sans-serif;
}

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

.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 30%;
background: linear-gradient(to bottom, #8BC34A, #4CAF50);
}

.track {
position: absolute;
bottom: 15%;
width: 300%;
height: 20px;
background: #795548;
animation: moveTrack 20s linear infinite;
}

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

.train-body {
position: absolute;
width: 100%;
height: 60px;
background: #FF5722;
border-radius: 10px 10px 0 0;
}

.train-window {
position: absolute;
top: 10px;
left: 20px;
width: 30px;
height: 30px;
background: #B3E5FC;
border-radius: 5px;
}

.train-window:nth-child(2) {
left: 60px;
}

.train-window:nth-child(3) {
left: 100px;
}

.train-window:nth-child(4) {
left: 140px;
}

.train-chimney {
position: absolute;
top: -20px;
left: 30px;
width: 15px;
height: 20px;
background: #424242;
}

.train-smoke {
position: absolute;
top: -40px;
left: 30px;
width: 10px;
height: 10px;
background: #EEEEEE;
border-radius: 50%;
opacity: 0;
animation: smoke 2s infinite;
}

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

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

.wheel {
position: absolute;
bottom: -15px;
width: 30px;
height: 30px;
background: #212121;
border-radius: 50%;
border: 5px solid #757575;
}

.wheel:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background: #9E9E9E;
border-radius: 50%;
transform: translate(-50%, -50%);
}

.wheel:nth-child(8) {
left: 20px;
}

.wheel:nth-child(9) {
left: 150px;
}

.cloud {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0.8;
animation: moveCloud 30s linear infinite;
}

.cloud:nth-child(1) {
top: 10%;
left: 10%;
width: 80px;
height: 50px;
animation-duration: 40s;
}

.cloud:nth-child(2) {
top: 20%;
left: 50%;
width: 100px;
height: 60px;
animation-duration: 35s;
}

.cloud:nth-child(3) {
top: 15%;
left: 80%;
width: 60px;
height: 40px;
animation-duration: 45s;
}

.tree {
position: absolute;
bottom: 30%;
width: 40px;
height: 100px;
}

.tree-trunk {
position: absolute;
bottom: 0;
left: 15px;
width: 10px;
height: 40px;
background: #5D4037;
}

.tree-leaves {
position: absolute;
bottom: 30px;
width: 40px;
height: 70px;
background: #2E7D32;
border-radius: 50% 50% 0 0;
}

.tree:nth-child(10) {
left: 10%;
animation: moveTree 20s linear infinite;
}

.tree:nth-child(11) {
left: 30%;
animation: moveTree 20s linear infinite;
animation-delay: -5s;
}

.tree:nth-child(12) {
left: 60%;
animation: moveTree 20s linear infinite;
animation-delay: -10s;
}

.tree:nth-child(13) {
left: 80%;
animation: moveTree 20s linear infinite;
animation-delay: -15s;
}

.sun {
position: absolute;
top: 10%;
right: 10%;
width: 60px;
height: 60px;
background: #FFC107;
border-radius: 50%;
box-shadow: 0 0 40px #FFEB3B;
}

.credit {
position: absolute;
bottom: 10px;
right: 10px;
color: white;
font-size: 12px;
}

@keyframes moveTrain {
0% {
transform: translateX(0);
}
100% {
transform: translateX(2000px);
}
}

@keyframes moveTrack {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-66.66%);
}
}

@keyframes moveTree {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-2000px);
}
}

@keyframes moveCloud {
0% {
transform: translateX(0);
}
100% {
transform: translateX(2000px);
}
}

@keyframes smoke {
0% {
transform: translateY(0) scale(0.5);
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
transform: translateY(-50px) scale(2);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="scene">
<div class="sun"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>

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

<div class="tree">
<div class="tree-trunk"></div>
<div class="tree-leaves"></div>
</div>
<div class="tree">
<div class="tree-trunk"></div>
<div class="tree-leaves"></div>
</div>
<div class="tree">
<div class="tree-trunk"></div>
<div class="tree-leaves"></div>
</div>
<div class="tree">
<div class="tree-trunk"></div>
<div class="tree-leaves"></div>
</div>

<div class="train">
<div class="train-body"></div>
<div class="train-window"></div>
<div class="train-window"></div>
<div class="train-window"></div>
<div class="train-window"></div>
<div class="train-chimney"></div>
<div class="train-smoke"></div>
<div class="train-smoke"></div>
<div class="train-smoke"></div>
<div class="wheel"></div>
<div class="wheel"></div>
</div>

<div class="credit">

<a href="http://www.example.com" target="_blank" style="color: white; text-decoration: none;">游乐园小火车动画</a>
</div>
</div>

<script>
// 添加一些交互效果
document.addEventListener('DOMContentLoaded', function() {
const train = document.querySelector('.train');

train.addEventListener('mouseover', function() {
document.querySelectorAll('.train-smoke').forEach(smoke => {
smoke.style.animationPlayState = 'running';
});
});

train.addEventListener('mouseout', function() {
document.querySelectorAll('.train-smoke').forEach(smoke => {
smoke.style.animationPlayState = 'paused';
});
});

// 点击火车会鸣笛
train.addEventListener('click', function() {
const audio = new Audio();
audio.src = 'https://www.soundjay.com/mechanical/sounds/train-horn-01.mp3';
audio.play().catch(e => console.log('自动播放被阻止，请点击页面后重试'));
});
});
</script>
</body>
</html>