火车行驶动态特效404单页源码

CSDN专家-微编程

已于 2024-07-16 08:16:29 修改

阅读量418

点赞数 3

分类专栏： HTML项目文章标签： HTML

于 2024-07-16 08:16:18 首次发布

本文链接：https://blog.csdn.net/technologist_28/article/details/140455247

版权

源码介绍

火车行驶动态特效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

最低0.47元/天解锁文章

CSDN专家-微编程

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
火车行驶动态特效404单页源码

火车行驶动态特效404单页源码，白云飘飘，小火车带着not page found行驶远方，适合做网站错误页，将下面的代码放到空白的html文件里面，鼠标双击即可查看效果，或者上传到服务器，设置好重定向即可
复制链接

扫一扫

专栏目录