源码介绍
火车行驶动态特效404单页源码，白云飘飘，小火车带着not page found行驶远方，适合做网站错误页，将下面的代码放到空白的html文件里面，鼠标双击即可查看效果，或者上传到服务器，设置好重定向即可
效果预览
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Train 404 Page</title>
<style>.main{
margin-top: 15%;
}
.st0{
fill:#fff}
.st2{
fill:#5d89af}
.st3{
fill:#709abf}
.st4,.st6{
fill:#fff;
stroke:#b3dcdf;
stroke-miterlimit:10
}
.st6{
stroke:#5d89af;
stroke-width:2
}
.st7,.st8,.st9{
stroke:#709abf;
stroke-miterlimit:10
}
.st7{
stroke-width:5;
stroke-linecap:round;
fill:none
}
.st8,.st9{
fill:#fff
}
.st9{
fill:none
}
.st10{
}
#cloud1{
animation: cloud003 15s linear infinite;
}
#cloud2{
animation: cloud002 25s linear infinite;
}
#cloud3{
animation: cloud003 20s linear infinite;
}
#cloud4{
animation: float 4s linear infinite;
}
#cloud5{
animation: float 8s linear infinite;
}
#cloud7{
animation: float 5s linear infinite;
}
#tracks{
animation: slide 650ms linear infinite;
}
#bumps{
animation: land 10000ms linear infinite;
}
@keyframes jig {
0% {
transform: translateY(0px); }
50% {
transform: translateY(1px); }
100% {
transform: translateY(0px); }
}
#car-layers{
animation: jig 0.35s linear infinite;
}
@keyframes land {
from {
transform: translateX(0); }
to {
transform: translateX(1000px); }
}
@keyframes slide {
from {
transform: translateX(0px); }
to {
transform: translateX(100px); }
}
/* @keyframes cloudFloat {
0% { transform: translateX(0) translateY(3px); }
100% { transform: translateX(1000px) translateY(0); }
} */
@keyframes cloud001 {
0% {
transform: translateX(-1000px) translateY(3px); }
100% {
transform: translateX(1000px) translateY(0); }
}
@keyframes cloud002 {
0% {
transform: translateX(-1000px) translateY(3px); }
100% {
transform: translateX(1000px) translateY(0); }
}
@keyframes cloud003 {
0% {
transform: translateX(-1000px) translateY(3px); }
100% {
transform: translateX(1000px) translateY(0); }
}
@keyframes float {
0% {
transform: translateY(0px) translateX(0); }
50% {
transform: translateY(8px) translateX(5px); }
100% {
transform: translateY(0px) translateX(0); }
}
#bracefront, #braceback{
animation: braces 1s linear infinite;
}
@keyframes braces {
0% {
transform: translateX(-2px); }
25% {
transform: translateX(3px); }
50% {
transform: translateX(-2px); }
75% {
transform: translateX(3px); }
100% {
transform: translateX(-2px); }
}</style>
</head>
<body>
<div class="main">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 355">
<g id="ocean">
<path id="sky" class="st0" d="M0 0h1000v203.1H0z"/>
<linearGradient id="water_1_" gradientUnits="userSpaceOnUse" x1="500" y1="354" x2="500" y2="200.667">
<stop offset="0" stop-color="#fff"/>
<stop offset="1" stop-color="#b3dcdf"/>
</linearGradient>
<path id="water" fill="url(#water_1_)" d="M0 200.7h1000V354H0z"/>
<path id="land" class="st0" d="M0 273.4h1000V354H0z"/>
<g id="bumps">
<path class="st0" d="M0 275.2s83.8-28 180-28 197 28 197 28H0z"/>
<path class="st0" d="M377 275.2s54.7-28 117.5-28 128.6 28 128.6 28H377z"/>
<path class="st0" d="M623.2 275.2s83.7-28 179.9-28 196.9 28 196.9 28H623.2z"/>
<path class="st0" d="M-998 275.2s83.8-28 180-28 197 28 197 28h-377z"/>
<path class="st0" d="M-621 275.2s54.7-28 117.5-28 128.6 28 128.6 28H-621z"/>
<path class="st0" d="M-374.8 275.2s83.7-28 179.9-28S2 275.2 2 275.2h-376.8z"/>
</g>
</g>
<g id="tracks">
<path class="st2" d="M9.8 282.4h-3L0 307.6h3z"/>
<path class="st2" d="M19.8 282.4h-3L10 307.6h3z"/>
<path class="st2" d="M29.8 282.4h-3L20 307.6h3z"/>
<path class="st2" d="M39.8 282.4h-3L30 307.6h3z"/>
<path class="st2" d="M49.8 282.4h-3L40 307.6h3z"/>
<path class="st2" d="M59.8 282.4h-3L50 307.6h3z"/>
<path class="st2" d="M69.8 282.4h-3L60 307.6h3z"/>
<path class="st2" d="M79.8 282.4h-3L70 307.6h3z"/>
<path class="st2" d="M89.8 282.4h-3L80 307.6h3z"/>
<path class="st2" d="M99.8 282.4h-3L90 307.6h3z"/>
<path class="st2" d="M109.8 282.4h-3l-6.8 25.2h3z"/>
<path class="st2" d="M119.8 282.4h-3l-6.8 25.2h3z"/>
<path class="st2" d="M129.8 282.4h-3l-6.8 25.2h3z"/>
<path 
