<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 实现的玩具火车</title>
<style>
html,
body {
height: 100%;
}
body {
background: linear-gradient(90deg, #1A2980 10%, #26D0CE 90%);
}
.toy-train {
position: relative;
left: 50%;
top: 50%;
margin-left: -100px;
width: 109px;
}
.engine {
float: right;
position: relative;
}
.window {
height: 28px;
width: 30px;
background-color: #194488;
position: relative;
border: 3px solid #000;
}
.window:before,
.window:after {
content: "";
position: absolute;
left: 50%;
border: 3px solid #000;
}
.window:before {
height: 7px;
background-color: #F82510;
width: 45px;
margin-top: -13px;
margin-left: -26px;
border-radius: 8px;
}
.window:after {
margin-left: -8px;
margin-top: 3px;
border-radius: 50%;
height: 11px;
width: 11px;
background-color: #fff;
}
.engine-main {
height: 10px;
width: 35px;
border: 3px solid #000;
background-color: #3D9A01;
position: absolute;
border-radius: 0 8px 8px 0;
right: -41px;
bottom: -3px;
}
.engine-main:before {
content: "";
height: 10px;
width: 8px;
background-color: #000;
position: absolute;
top: -11px;
left: 4px;
transform: rotate(180deg);
border-radius: 50% 50% 50% 50% / 90% 90% 40% 40%;
}
.engine-main:after {
content: "";
height: 12px;
width: 8px;
position: absolute;
display: block;
right: 5px;
top: -18px;
border-radius: 50% 50% 50% 50% / 90% 90% 40% 40%;
transform: rotate(180deg);
z-index: -1;
background-color: #194488;
border: 3px solid #000;
}
.engine-body {
height: 17px;
width: 75px;
position: absolute;
left: -2px;
top: 30px;
background-color: #F69F00;
border: 3px solid #000;
border-radius: 5px;
}
.engine-body .big-wheel {
top: 3px;
left: 2px;
}
.engine-body .normal-wheel {
left: 45px;
top: 5px;
}
.engine-body:before {
content: "";
position: absolute;
height: 5px;
width: 5px;
left: -11px;
bottom: 2px;
z-index: -1;
background-color: #fff;
border-radius: 50%;
border: 3px solid #000;
}
.wheels > div {
position: absolute;
background-color: #F82510;
border-radius: 50%;
border: 3px solid #000;
animation: wheel-rotate 1s linear infinite;
}
.wheels > div:before {
content: "";
position: absolute;
width: 100%;
border-bottom: 1px solid #000;
top: 50%;
margin-top: -1px;
}
.wheels > div:after {
content: "";
height: 8px;
width: 8px;
position: absolute;
background-color: #000;
border-radius: 50%;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px;
}
.wheels .big-wheel {
width: 22px;
height: 22px;
animation-delay: -0.3s;
}
.wheels .normal-wheel {
height: 20px;
width: 20px;
animation-delay: -0.6s;
}
.locomotive {
height: 35px;
width: 60px;
border: 3px solid #000;
background-color: #F69F00;
border-radius: 5px;
position: relative;
float: left;
margin-top: 13px;
}
.locomotive:before {
content: "";
width: 100%;
background: linear-gradient(to right, #000000 0%, #000000 8%, #f69f00 8%, #f69f00 15%, #000000 15%, #000000 28%, #000000 34%, #f69f00 34%, #f69f00 65%, #000000 65%, #000000 65%, #000000 100%);
height: 3px;
position: absolute;
top: 6px;
left: 0;
}
.locomotive:after {
content: "";
width: 100%;
background: linear-gradient(to right, #000000 0%, #000000 24%, #f69f00 24%, #f69f00 65%, #f69f00 65%, #000000 65%, #000000 85%, #f69f00 85%, #f69f00 90%, #000000 90%, #000000 100%);
height: 3px;
position: absolute;
top: 14px;
left: 0;
}
.locomotive .wheels > div {
top: 22px;
animation-delay: -0.6s;
}
.locomotive .wheels > div:first-child {
animation-delay: -0.9s;
}
.locomotive .normal-wheel:first-of-type {
left: 2px;
}
.locomotive .normal-wheel:last-of-type {
right: 2px;
}
.locomotive .trash {
height: 35px;
width: 50px;
position: absolute;
top: -18px;
border: 3px solid #000;
background-color: #3D9A01;
border-radius: 50%;
left: 2px;
z-index: -1;
}
.tracks {
position: relative;
width: 200px;
bottom: -10px;
overflow: hidden;
height: 3px;
}
.tracks span {
display: inline-block;
height: 3px;
width: 200px;
position: absolute;
left: 200px;
background: linear-gradient(to right, black 0%, black 30%, transparent 30%, transparent 39%, black 39%, black 61%, black 65%, transparent 65%, transparent 70%, black 71%, black 100%);
animation: track 2s linear infinite;
animation-fill-mode: forwards;
}
.tracks span:nth-child(2) {
animation-delay: -1s;
}
.smokes:before,
.smokes:after,
.smokes span:before {
display: block;
content: "";
height: 8px;
width: 8px;
background-color: #fff;
border-radius: 50%;
position: absolute;
right: 8px;
top: 15px;
z-index: -1;
}
.smokes:before {
animation: smoke 1s linear infinite;
}
.smokes span:before {
animation: smoke 1s linear infinite;
animation-delay: -0.6s;
}
.smokes:after {
animation: smoke 1s linear infinite;
animation-delay: -0.3s;
}
@keyframes smoke {
100% {
top: -50px;
opacity: 0.5;
}
}
@keyframes wheel-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes track {
100% {
left: -200px;
}
}
</style>
</head>
<body>
<div class="toy-train">
<div class="engine">
<div class="window">
<div class="engine-main">
<div class="smokes">
<span></span>
</div>
</div>
</div>
<div class="engine-body">
<div class="wheels">
<div class="big-wheel"></div>
<div class="normal-wheel"></div>
</div>
</div>
</div>
<div class="locomotive">
<div class="trash"></div>
<div class="wheels">
<div class="normal-wheel"></div>
<div class="normal-wheel"></div>
</div>
</div>
<div class="tracks">
<span></span>
<span></span>
</div>
</div>
</body>
</html>