纯css 实现动态小火车

最新推荐文章于 2022-10-17 12:02:14 发布
最新推荐文章于 2022-10-17 12:02:14 发布
阅读量683 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_14174/article/details/82726592
版权
主要的知识点在于
1、对相对定位绝对定位的学习
2、图片渐变的学习
3、图片阴影的学习
4、border-radius
5、动画 



<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>纯CSS3实现动态火车行驶特效</title>
  <base target="_blank" />
  <link rel="stylesheet" type="text/css" href="./mytrain.css">
</head>


<body>

  <div id='hoverTrain'>
    <div id="pipe"></div>
    <div id="main-fog"></div>
    <div class="alt-fog nth1"></div>
    <div class="alt-fog nth2"></div>
    <div class="alt-fog nth3"></div>
    <div class="alt-fog nth4"></div>
    <div id="front"></div>
    <div id="front1"></div>
    <div id='bot'>
      <div id='lamp'></div>
    </div>
    <div id='longan'></div>
    <div id='buritan'></div>
    <div id='moncong'></div>
    <div id='moncong-bot'></div>
    <div id='room'>
      <div class='hole'></div>
      <div class='hole nth2'></div>
      <div style='clear:both'></div>
    </div>
    <div id='roof'></div>
    <div id='roof2'></div>
    <div id='metal'>
      <div class='inner'></div>
    </div>
    <div id='fence'>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div id='title'>
      <h2>
        XXX号火车
      </h2>
      欢迎乘坐
    </div>
    <div class='foot left'></div>
    <div class='foot right'></div>
    <div class='stair left'>
      <div class='hand left'></div>
      <div class='hand right'></div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div style="clear:both"></div>
    </div>
    <div class='stair right'>
      <div class='hand left'></div>
      <div class='hand right'></div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div style="clear:both"></div>
    </div>

    <div class="rodaout nth1">
      <div class="inner">
        <div class="in-in">
          <div class="grid r1"></div>
          <div class="grid r2"></div>
          <div class="grid r3"></div>
          <div class="grid r4"></div>
          <div class="grid r5"></div>
          <div class="grid r6"></div>
          <div class="hub"></div>
        </div>
      </div>
    </div>
    <div class="rodaout nth2">
      <div class="inner">
        <div class="in-in">
          <div class="grid r1"></div>
          <div class="grid r2"></div>
          <div class="grid r3"></div>
          <div class="grid r4"></div>
          <div class="grid r5"></div>
          <div class="grid r6"></div>
          <div class="hub"></div>
        </div>
      </div>
    </div>
    <div class="rodaout nth3">
      <div class="inner">
        <div class="in-in">
          <div class="grid r1"></div>
          <div class="grid r2"></div>
          <div class="grid r3"></div>
          <div class="grid r4"></div>
          <div class="grid r5"></div>
          <div class="grid r6"></div>
          <div class="hub"></div>
        </div>
      </div>
    </div>
    <div class="rodaout nth4">
      <div class="inner">
        <div class="in-in">
          <div class="grid r1"></div>
          <div class="grid r2"></div>
          <div class="grid r3"></div>
          <div class="grid r4"></div>
          <div class="grid r5"></div>
          <div class="grid r6"></div>
          <div class="hub"></div>
        </div>
      </div>
    </div>
    <div class="rodaout nth5">
      <div class="inner">
        <div class="in-in">
          <div class="grid r1"></div>
          <div class="grid r2"></div>
          <div class="grid r3"></div>
          <div class="grid r4"></div>
          <div class="grid r5"></div>
          <div class="grid r6"></div>
          <div class="hub"></div>
        </div>
      </div>
    </div>
    <div class="rodaout nth6">
      <div class="inner">
        <div class="in-in">
          <div class="grid r1"></div>
          <div class="grid r2"></div>
          <div class="grid r3"></div>
          <div class="grid r4"></div>
          <div class="grid r5"></div>
          <div class="grid r6"></div>
          <div class="hub"></div>
        </div>
      </div>
    </div>
    <div id="grouper">
      <div class="strong nth1"></div>
      <div class="strong nth2"></div>
      <div class="strong nth3"></div>
      <div class="strong nth4"></div>
      <div class="strong nth5"></div>
      <div class="end"></div>
    </div>

    <div id="machine-box"></div>
    <div class="vertical one"></div>
    <div class="vertical two"></div>

    <ul class="stripe-stripe one">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="stripe-stripe two">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

</body>

</html>




/* 
 Chrome(谷歌浏览器) ：WebKit内核   -webkit-
 Safari(苹果浏览器) ：WebKit内核       -webkit-
 Firefox(火狐浏览器) ：Gecko内核       -moz-
 IE(IE浏览器) ：          Trident内核           -ms-
 Opera(欧朋浏览器) ：Presto内核          -o- 
 */

 /*
     *{}指的是通配符样式  是当前所有的标签都能继承这个样式，所有浏览器支持通配符选择器。
 */
 *{
     margin:0px;
     padding:0px;
     list-style: none;
 }

 /*整个浏览器背景*/
body{
    background: #eee;
    text-align: center;
    overflow-x:hidden;
}

@keyframes train-animation{
    from{
        left:100%
    }
    to {
        left:-1300px;
    }
}


@keyframes  rodaout-animation{
    from{
        transform: rotate(0deg)
    }
    to{
        transform: rotate(-360deg)
    }
}

/*火车的整体样式*/
#hoverTrain{
    width:1250px;
    height:370px;
    margin:2px auto auto auto;
    border:2px solid saddlebrown;
    position: relative;
    /* animation:train-animation 18s linear infinite */
}

/*火车身*/
#pipe{
    width:960px;
    height:100px;
    background-color:#222;
    background-image: -webkit-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*谷歌 	Safari mac 浏览器*/
    background-image: -moz-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000); /*火狐浏览器*/
    background-image:-o-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*Opera 欧朋浏览器*/
    background-image:-ms-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie 浏览器*/
    background-image:linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*兼容写法之后有个普遍的写法*/
    position: absolute;
    top:80px;
    left:145px;
    box-shadow:inset  4px 0px 3px #000
    /*box-shadow:inset 20px 50px 3px #222   五个参数的意思：1、阴影位置  2、相对于原来的div的宽移动20px  3、相对于原来的div的高移动50px 
    4、阴影模糊度   5、阴影颜色*/
}

/* 在火车的车身div元素之前加上伪元素  车身上的两条线 */
#pipe:before{
    content:'';
    width:4px;
    height:100px;
    border:6px double #000; /*边框宽度是6px   双边框  黑色*/
    position: absolute;
    top:0px;
    left:75px;
    border-top-width: 0px;  /*上边框是0px 表示上边框消失*/
    border-bottom-width: 0px; /*下边框是0px 表示下边框消失*/
    box-shadow: 1px 0px 0px rgba(255,255,255,0.3), -1px 0px 0px rgba(255,255,255,0.3), 
    inset 1px 0px 0px rgba(255,255,255,0.3), inset -1px 0px 0px rgba(255,255,255,0.3);
/*box-shadow 这里面四个逗号代表当前的盒子有四个阴影。 
1、正常右边的阴影1  偏于div宽的1px  偏于div高0px 阴影模糊度0px 阴影颜色是rgba(255,255,255,0.3)
2、正常右边的阴影2  偏于div宽的-1px 偏于div高0px 阴影模糊度0px 阴影颜色是rgba(255,255,255,0.3)
3、内嵌的阴影3      偏于div宽的1px  偏于div高0px 阴影模糊度0px 阴影颜色是rgba(255,255,255,0.3)
4、内嵌的阴影4      偏于div宽的-1px 偏于div高0px 阴影模糊度0px 阴影颜色是rgba(255,255,255,0.3)
*/
}

/*大烟囱*/
#main-fog{
    width:50px;
    height:60px;
    background-color:#222;
    position: absolute;
    top:30px;
    left:165px;
    border-bottom-left-radius: 50px 10px;
    border-bottom-right-radius: 50px 10px;
    background-image: -webkit-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*谷歌 safari*/
    background-image:-moz-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*火狐*/
    background-image:-o-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*欧朋*/
    background-image:-ms-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie*/
    background-image:linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);
}


/*大烟囱上的帽沿  用伪元素实现*/
#main-fog:before{
    content:'';
    position: absolute;
    width:54px;
    height:20px;
    background-color:#222;
    left:-2px;
    bottom:100%;
    background-image: -webkit-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*谷歌 safari*/
    background-image:-moz-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*火狐*/
    background-image:-o-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*欧朋*/
    background-image:-ms-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie*/
    background-image:linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    box-shadow: inset 4px 0px 3px  #000
}

/*小烟囱  四个一样的样式*/
.alt-fog{
   width:37px;
   height:30px;
   position: absolute;;
   top:60px;
   left:255px;
   background:#222;
   -webkit-border-top-left-radius: 50px;
   -webkit-border-top-right-radius: 50px;
   -webkit-border-bottom-left-radius: 50px 10px;
   -webkit-border-bottom-right-radius: 50px 10px;
   -moz-border-top-left-radius: 50px;
   -moz-border-top-right-radius: 50px;
   -moz-border-bottom-left-radius: 50px 10px;
   -moz-border-bottom-right-radius: 50px 10px;
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
   border-bottom-left-radius: 50px 10px;
   border-bottom-right-radius: 50px 10px;
   background-image: -webkit-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*谷歌 safari*/
   background-image:-moz-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*火狐*/
   background-image:-o-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*欧朋*/
   background-image:-ms-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie*/
   background-image:linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);
   -webkit-box-shadow: inset 0px 4px 3px #666;
   -moz-box-shadow: inset 0px 4px 3px #666;
   box-shadow: inset 0px 4px 3px #666;
}


/*小烟囱上面两组小点   左边和右边*/
.alt-fog:before,.alt-fog:after{
    content:'';
    position: absolute;
    width:5px;
    height:15px;
    background-color:#222;
    bottom:-5px;
    left:15px;
    background-image: -webkit-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*谷歌 safari*/
    background-image:-moz-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*火狐*/
    background-image:-o-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*欧朋*/
    background-image:-ms-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie*/
    background-image:linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    -webkit-box-shadow:  0px 0px 3px #000;
    -moz-box-shadow:  0px 0px 3px #000;
    box-shadow:  0px 0px 3px #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/*小烟囱右边的小点距离左边小点22px*/
.alt-fog:after{
    left:22px;
}

/*第二个烟囱距离第一个烟囱的距离*/
.alt-fog.nth2{
    left:355px;
}
/*第3️⃣个烟囱距离第二个烟囱的距离*/
.alt-fog.nth3{
    left:455px;
}
/*第四个烟囱距离第三个烟囱的距离*/
.alt-fog.nth4{
    left:555px;
}
/*车头最左侧的半圆形元素*/
#front{
  width:10px;
  height: 97px;
  position: absolute;
  top:78px;
  left:123px;
  background-color: #333;
  -webkit-border-top-left-radius: 50px 200px;
  -webkit-border-bottom-left-radius: 50px 200px;
  -moz-border-top-left-radius: 50px 200px;
  -moz-border-bottom-left-radius: 50px 200px;
  border-top-left-radius: 50px 200px;
  border-bottom-left-radius: 50px 200px;
  -webkit-box-shadow: inset 0px -10px 5px #000,inset 1px 10px 5px #666,0px 1px 3px #000;
  -moz-box-shadow: inset 0px -10px 5px #000,inset 1px 10px 5px #666,0px 1px 3px #000;
  box-shadow: inset 0px -10px 5px #000,inset 1px 10px 5px #666,0px 1px 3px #000;
}
/*车头2竖型元素*/
#front1{
    width:17px;
    height:110px;
    position: absolute;
    background-color:#222;
    top:70px;
    left:135px;
    background-image: -webkit-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*谷歌 safari*/
    background-image:-moz-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*火狐*/
    background-image:-o-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*欧朋*/
    background-image:-ms-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie*/
    background-image:linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    -webkit-box-shadow:  0px 0px 3px #000;
    -moz-box-shadow:  0px 0px 3px #000;
    box-shadow:  0px 0px 3px #000;
}

/*车头2竖型元素左侧的竖线*/
#front1:before{
    content:'';
    position: absolute;
    width:2px;
    height:120px;
    top:2px;
    left:auto;
    right:100%;
}
/*车头2竖型元素右侧的竖线*/
#front1:after{
    content:'';
    position: absolute;
    width:7px;
    height:120px;
    top:2px;
    left:100%;
    right:auto;
}

/*车头2竖型div  左侧竖线 右侧竖线统一的样式*/
#front1,#front:befroe,#front1:after{
    position: absolute;
    background-color:#222;
    top:70px;
    left:135px;
    width:17px;
    height:110px;
    background-image:-webkit-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    background-image:-moz-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    background-image:-ms-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    background-image:-o-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    background-image:linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    -webkit-box-shadow:0px 0px 3px #000;
    -moz-box-shadow:0px 0px 3px #000;
    box-shadow:0px 0px 3px #000;
}

/*火车底部车身元素*/
#bot{
    width:1000px;
    height:100px;
    background-color:#222;
    top:180px;
    left:135px;
    position: absolute;
    background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000);
    background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000);
    background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000);
    background-image:-o-linear-gradient(45deg,#000,#222,#111,#000);
    background-image:linear-gradient(45deg,#000,#222,#111,#000);
    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px -4px 7px #000;
    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px -4px 7px #000;
    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px -4px 7px #000;
}
/*火车车身上两块矩形元素*/
#bot:before,#bot:after{
    content:'';
    position: absolute;
    width:170px;
    height:30px;
    top:15px;
    left:170px;
    z-index:10;
    background-color:#222;
    background-image:-webkit-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    background-image:-moz-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    background-image:-ms-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    background-image:-o-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    background-image:linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
    -webkit-box-shadow:inset 4px 0px 0px rgba(255,255,255,0.2),inset -4px 0px 0px rgba(255,255,255,0.2),0px 3px 4px #000;
    -moz-box-shadow:inset 4px 0px 0px rgba(255,255,255,0.2),inset -4px 0px 0px rgba(255,255,255,0.2),0px 3px 4px #000;
    box-shadow:inset 4px 0px 0px rgba(255,255,255,0.2),inset -4px 0px 0px rgba(255,255,255,0.2),0px 3px 4px #000;
}

/*火车车身上第二块矩形元素距离第一块的距离*/
#bot:after{
    top:45px;
}


/*黄色的车灯后面的竖线*/
#lamp{
    width:4px;
    height:60px;
    background-color:#666;
    position: absolute;
    bottom:100%;
    left:5px;
    background-image:-webkit-linear-gradient(45deg,#000,#666,#222,#999,#666);
    background-image:-moz-linear-gradient(45deg,#000,#666,#222,#999,#666);
    background-image:-ms-linear-gradient(45deg,#000,#666,#222,#999,#666);
    background-image:-o-linear-gradient(45deg,#000,#666,#222,#999,#666);
    background-image:linear-gradient(45deg,#000,#666,#222,#999,#666);
    -webkit-box-shadow: 3px 1px 2px #000;
    -moz-box-shadow: 3px 1px 2px #000;
    box-shadow: 3px 1px 2px #000;
}
/*黄色的车灯*/
#lamp:before{
    content:'';
    position: absolute;;
    width:4px;
    height:20px;
    background-color:yellow;
    right:100%;
    top:0px;
    background-image: -webkit-radial-gradient(left,circle,#fff,yellow,#666);
    background-image:-moz-radial-gradient(left,circle,#fff,yellow,#666);
    background-image: -ms-radial-gradient(left,circle,#fff,yellow,#666);
    background-image:-o-radial-gradient(left,circle,#fff,yellow,#666);
    background-image: radial-gradient(left,circle,#fff,yellow,#666);
    -webkit-border-top-left-radius: 10px 30px;
    -webkit-border-bottom-left-radius: 10px 30px;
    -moz-border-top-left-radius: 10px 30px;
    -moz-border-bottom-left-radius: 10px 30px;
    border-top-left-radius: 10px 30px;
    border-bottom-left-radius: 10px 30px;
}
/*黄色的车灯竖线后面的支架*/
#lamp:after{
    content:'';
    position: absolute;
    width:12px;
    height:16px;
    background:#333;
    background-image: -webkit-linear-gradient(top,#666,#222,#999,#666);
    background-image: -moz-linear-gradient(top,#666,#222,#999,#666);
    background-image: -ms-linear-gradient(top,#666,#222,#999,#666);
    background-image: -o-linear-gradient(top,#666,#222,#999,#666);
    background-image: linear-gradient(top,#666,#222,#999,#666);
    left:100%;
    top:2px;
    -webkit-box-shadow:3px 4px 2px #000;
    -moz-box-shadow:3px 4px 2px #000;
    box-shadow:3px 4px 2px #000;
}

/*轮子后面带阴影的区域*/
#longan{
    width:870px;
    height:100px;
    background-color:#111;
    position: absolute;
    top:200px;
    left:172px;
    box-shadow:inset 0px 7px 3px #000, inset 0px 7px 7px #000, inset 0px 7px 15px #000;
    border-radius: 30px 10px ;
}

/*火车尾部*/
#buritan{
    width:40px;
    height:97px;
    position: absolute;
    background:#222;
    top:175px;
    right:80px;
    background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000);
    background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000);
    background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000);
    background-image:-o-linear-gradient(45deg,#000,#222,#111,#000);
    background-image:linear-gradient(45deg,#000,#222,#111,#000);
    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000;
    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000;
    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000;
}

/*火车头部梯子左边的三角形*/
#moncong{
    width:0px;
    height:0px;
    position: absolute;
    top:155px;
    left:75px;
    border-top:60px solid transparent;
    border-left:40px solid transparent;
    border-bottom:90px solid #222;

}
/*火车头部梯子左边的三角形下面的矩形*/
#moncong-bot{
    width:50px;
    height:37px;
    position: absolute;
    top:277px;
    left:70px;
    background: #222;
    border-bottom-right-radius: 60px 20px;
    background-image: -webkit-linear-gradient(-45deg,#000,#222,#111,#000);
    background-image: -ms-linear-gradient(-45deg,#000,#222,#111,#000);
    background-image: -moz-linear-gradient(-45deg,#000,#222,#111,#000);
    background-image: -o-linear-gradient(-45deg,#000,#222,#111,#000);
    background-image: linear-gradient(-45deg,#000,#222,#111,#000);
    -webkit-box-shadow:0px 1px 4px #000;
    -moz-box-shadow:0px 1px 4px #000;
    box-shadow:0px 1px 4px #000;
}

/*矩形前面的u型*/
#moncong-bot:before{
    content:'';
    width:20px;
    height:47px;
    position: absolute;
    left:2px;
    bottom:7px;
    border:3px solid #666;
    -webkit-border-radius: 7px 7px 0px 0px ;
    -moz-border-radius: 7px 7px 0px 0px ;
    border-radius: 7px 7px 0px 0px ;
    -webkit-box-shadow: inset 0px 0px 3px #000, 0px 0px 3px #000;
    -moz-box-shadow: inset 0px 0px 3px #000, 0px 0px 3px #000;
    box-shadow: inset 0px 0px 3px #000, 0px 0px 3px #000;
}

/*矩形后面的椭圆型*/
#moncong-bot:after{
    content:'';
    position: absolute;
    width:35px;
    height:5px;
    background:#999;
    border:2px solid #666;
    top:24px;
    left:-2px;
    background-image: -webkit-linear-gradient(45deg,#666,#ccc,#333,#999,#333);
    background-image: -moz-linear-gradient(45deg,#666,#ccc,#333,#999,#333);
    background-image: -ms-linear-gradient(45deg,#666,#ccc,#333,#999,#333);
    background-image: -o-linear-gradient(45deg,#666,#ccc,#333,#999,#333);
    background-image: linear-gradient(45deg,#666,#ccc,#333,#999,#333);
    -webkit-box-shadow: 0px 1px 4px #000;
    -moz-box-shadow: 0px 1px 4px #000;
    box-shadow: 0px 1px 4px #000;

}

/*火车车舱*/
#room{
    position: absolute;
    width:350px;
    height:125px;
    background:#222;
    top:40px;
    left:760px;
    background-image: -webkit-linear-gradient(45deg,#000,#222,#111,#000);
    background-image: -moz-linear-gradient(45deg,#000,#222,#111,#000);
    background-image: -ms-linear-gradient(45deg,#000,#222,#111,#000);
    background-image: -o-linear-gradient(45deg,#000,#222,#111,#000);
    background-image: linear-gradient(45deg,#000,#222,#111,#000);
}


/*车舱上110*/
#room:before{
    content:'110';
    position: absolute;
    top:15px;
    left:25px;
    font: bold 28px 'Prisoner SF',Courier,Monospace;
    color: rgba(255,255,255,0.4);
}

/*车门*/
.hole{
    width:40px;
    height:75px;
    background:#111;
    border:2px solid #222;
    margin:20px 25px 0px 0px;
    border-radius: 20px 20px 0px 0px;
    float:right;
    box-shadow: inset 0px 1px 7px #000, 0px 0px 1px rgba(255,255,225,0.4);
    position: relative;
    display: inline;
}

.hole:before,.hole:after{
    content:'';
    position: absolute;
    width:12px;
    height:2px;
    background:#666;
    margin-top:7px;
    top:100%;
    left:2px;
    display: block;
    box-shadow: 0px 1px 1px #000;
    border-radius: 5px;
}

.hole:after{
    margin-top:11px;
}

.hole.nth2{
    margin-right:10px;
}

/*车舱顶 穴*/
#roof{
    position: absolute;
    width:370px;
    height:20px;
    background:#222;
    top:30px;
    left:750px;
    background-image: linear-gradient(45deg,#000,#222,#111,#000);
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px #000;
}

#roof2{
    position: absolute;
    width:430px;
    height:20px;
    background:#222;
    top:20px;
    left:720px;
    background-image: linear-gradient(top,#000,#222,#111,#000);
    box-shadow: 0px 4px 4px #000;
    border-bottom-right-radius:60px 20px;
}


#roof2:before{
    content:'';
    position: absolute;
    width:5px;
    height:2px;
    background:#333;
    bottom:-2px;
    left:12px;
    border:1px solid #444;
    box-shadow:0px 1px 3px #000;
}


#roof2:after{
    content:'';
    position: absolute;
    width:5px;
    height:5px;
    background:#333;
    top:15px;
    left:408px;
    border:1px solid #444;
    box-shadow:0px 1px 3px #000;
}

#metal{
    position: absolute;
    width:670px;
    height:75px;
    background:#222;
    top:100px;
    left:272px;
    background-image: linear-gradient(45deg,#111 0%,#000 20%,#000 21%,#333 40%,#000 50%,#222 51%,#111 60%,#000 60%,#111 61%,#000 100%);
    box-shadow: inset 0px 0px 1px rgba(255,255,255,0.3), 0px 1px 3px #000;
    border-radius: 3px 0px 0px 0px;
}


.inner{
    width:659px;
    height:66px;
    border:1px dotted #666;
    margin:5px 0px 0px 5px;

}


#fence{
    position: absolute;
    top:140px;
    left:1100px;
    width:70px;
    height:40px;

}

#fence ul{
    position: relative;
    height: 40px;
}

#fence ul:before{
    content:'';
    position: absolute;
    width:78px;
    height:10px;
    top:-10px;
    left:-2px;
    background-color: #222;
    background-image: linear-gradient(45deg,#000,#222,#111,#000);
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px #000;
}

#fence ul:after{
    content:'';
    position: absolute;
    width:78px;
    height:10px;
    top:40px;
    left:-2px;
    margin-top:-7px;
    background-color: #222;
    background-image: linear-gradient(45deg,#000,#222,#111,#000);
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px #000;
}


#fence ul li{
    display: inline;
    float:right;
    width:4px;
    height:40px;
    background:#666;
    margin-left:4px;
    margin-right:4px;
    background-image: linear-gradient(left,#666,#ccc,#333,#999,#333);
    box-shadow: 0px 0px 3px #000;
    border-radius: 10px;
}


#title{
    position: absolute;
    top:100px;
    left:292px;
    width:642px;
    height:75px;
    text-align: left;
    color:#777;
    font: normal 11px Georgia,Times,Serif;
    text-shadow: 0px -1px 0px #000;
}


#title h2{
    color:#666;
    font: bold 22px 'Book Antiqua',Times,Serif;
    text-transform: uppercase;
    margin:10px 0px 5px 0px ;
    padding-bottom:5px;
    border-bottom:1px dotted #666;
}


.foot{
    position: absolute;
    top:210px;
    left:115px;
    width:50px;
    height:100px;
    background:#222;
    background-image: linear-gradient(45deg,#000,#222,#111,#000);
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px #000;
}

.foot.right{
    width:78px;
    right:130px;
    left:auto;
    border-bottom-left-radius: 50px 10px;
}


.stair{
    position: absolute;
    top:205px;
    left:120px;
    width:30px;
    height:110px;
    background:#222;
}

.stair.left{
    height:115px;
}

.stair.right{
  right:170px;
  left:auto;
}

.stair .hand{
    width:5px;
    height:110px;
    background-image: -webkit-linear-gradient(left,#666,#ccc,#333,#999,#333);
    background-image: -moz-linear-gradient(left,#666,#ccc,#333,#999,#333);
    background-image: -ms-linear-gradient(left,#666,#ccc,#333,#999,#333);
    background-image: -o-linear-gradient(left,#666,#ccc,#333,#999,#333);
    background-image: linear-gradient(left,#666,#ccc,#333,#999,#333);
    border-radius: 10px;
    box-shadow: inset 0px 2px 1px #ccc, 0px 0px 3px #000;
}

.stair .hand.right{
    float:right;
    margin-top:-110px;
}

.stair ul{
    width:30px;
    height:93px;
    position: absolute;
    bottom:10%;
}

.stair ul li{
    display: block;
    height:5px;
    margin-top:4px;
    margin-bottom:6px;
    background-image: -webkit-linear-gradient(top,#666,#ccc,#333,#999,#333);
    background-image: -moz-linear-gradient(top,#666,#ccc,#333,#999,#333);
    background-image: -ms-linear-gradient(top,#666,#ccc,#333,#999,#333);
    background-image: -o-linear-gradient(top,#666,#ccc,#333,#999,#333);
    background-image: linear-gradient(top,#666,#ccc,#333,#999,#333);
    box-shadow: 0px 0px 3px #000;
    padding:0px;
}


.rodaout{
    width:130px;
    height:130px;
    position: absolute;
    background:#222;
    top:205px;
    left:187px;
    border-radius: 400px;
    /* animation: rodaout-animation 2s linear infinite */
}

.rodaout .inner{
    width:120px;
    height:120px;
    border:2px solid #6A210C;
    position: relative;
    top:-2px;
    left:-2px;
    -webkit-box-shadow:0px 0px 1px #000;
    -moz-box-shadow:0px 0px 1px #000;
    box-shadow:0px 0px 1px #000;
    -webkit-border-radius:400px;
    -moz-border-radius:400px;
    border-radius:400px;

}

.rodaout .inner .in-in{
    width:100px;
    height:100px;
    border:10px solid #333;
    position: relative;
    top:0px;
    left:0px;
    border-radius: 400px;
    box-shadow:inset 0px 1px 5px #000, 0px 0px 2px #000;
}

.grid{
    width:3px;
    height:98px;
    position: absolute;
    border:1px solid #777;
    background:#666;
    top:0px;
    left:47px;
    box-shadow: 0px 0px 1px #000;
    border-radius: 5px / 70px;
}

.grid.r2{
    transform: rotate(30deg)
}
.grid.r3{
    transform: rotate(60deg)
}
.grid.r4{
    transform: rotate(90deg)
}
.grid.r5{
    transform: rotate(120deg)
}
.grid.r6{
    transform: rotate(150deg)
}

.hub{
    width:10px;
    height:10px;
    background:#666;
    border:5px solid #777;
    position: absolute;
    top:40px;
    left:40px;
    border-radius: 20px;
    box-shadow: 0px 0px 2px #000;
}
.rodaout.nth2{
    left:327px;
}
.rodaout.nth3{
    left:467px;
}
.rodaout.nth4{
    left:607px;
}
.rodaout.nth5{
    left:747px;
}
.rodaout.nth6{
    left:887px;
}


#grouper{
    width:800px;
    height:90px;
    background:transparent;
    position: absolute;
    top:225px;
    left:190px;
}


.strong{
    width:130px;
    height:4px;
    border:1px solid #666;
    background:#666;
    position: absolute;
    bottom:12px;
    left:87px;
    background-image: linear-gradient(-45deg,#666,#ccc,#333,#999,#333); 
    box-shadow: inset 0px 1px 0px rgba(0,0,0,0.7), inset 0px -1px 0px rgba(0,0,0,0.7), 0px 1px 3px #000;
}

.strong:before,.strong:after{
    content:'';
    width:10px;
    height:10px;
    border:3px double #666;
    background:#333;
    position: absolute;
    top:-6px;
    left:-2px;
    border-radius: 20px;
    box-shadow: 0px 1px 3px #000;

}

.end{
    width:20px;
    height:20px;
    border:3px double #999;
    background:#666;
    position: absolute;
    top:42px;
    left:774px;
    border-radius: 50px;
    background-image: -webkit-radial-gradient(center,cover,#aaa,#333);
    box-shadow: 0px 1px 3px #000;
}


.strong:after{
    left:auto;
    right:-2px;
}

.strong.nth2{
    left:227px;
}

.strong.nth3{
    left:368px;
}

.strong.nth4{
    left:508px;
}

.strong.nth5{
    left:648px;
}


#machine-box{
    width:127px;
    height:140px;
    background:#333;
    position: absolute;
    top:175px;
    left:160px;
    background-image:linear-gradient(45deg,#000,#222,#111,#000);;
    border-bottom-right-radius:50px 20px;
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 7px #000;
}

#machine-box:before{
    content:'';
    width:98px;
    height:36px;
    border:2px solid #222;
    background:#222;
    position: absolute;
    top:10px;
    left:39px;
    background-image:linear-gradient(45deg,#000,#222,#111,#000);
    box-shadow: inset 4px 4px 0px rgba(255,255,255,0.2), inset -4px -4px 0px rgba(255,255,255,0.2), 0px 1px 7px #000;;

}


.vertical{
    width:5px;
    height:50px;
    background:#333;
    position: absolute;
    top:180px;
    left:212px;
    background-image: -webkit-linear-gradient(top,#666,#ccc,#333,#999,#333);
    box-shadow: inset 0px 2px 1px #ccc, 0px 0px 3px #000;
    border-radius: 10px;
}

.vertical.two{
    left:218px;
}


.stripe-stripe{
    width:70px;
    height:69px;
    position: absolute;
    margin:0;
    padding:0px;

}

.stripe-stripe.one{
    top:235px;
    left:180px;
}

.stripe-stripe.two{
    top:60px;
    left:846px;
    height:24px;
    padding:0px 7px 3px 7px;
}

ul.stripe-stripe li{
    display: block;
    height:1px;
    background:#444;
    margin-bottom:2px;

}

.stripe-stripe.one:before,.stripe-stripe.one:after{
    content:'';
    width:10px;
    height:10px;
    border:3px double #666;
    background:#333;
    position: absolute;
    top:30px;
    left:-5px;
    border-radius: 20px;
    box-shadow: 0px 1px 3px #000;
}

.stripe-stripe.one:after{
    top:45px;
}

.stripe-stripe.two:before,.stripe-stripe.two:after{
    content:'';
    width:15px;
    height:2px;
    border:3px double #666;
    background:#111;
    position: absolute;
    top:0px;
    left:84px;
    margin-left:10px;
    border-radius: 20px;
    box-shadow: 0px 1px 3px #000;
}

.stripe-stripe.two:after{
    top:10px;
}
iteye_14174
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯 CSS3 卡通小火车行驶动画
克隆窝
01-13 2450
自从CSS3流行以来，基于纯CSS3的动画就层出不穷，有纯CSS3的人物动画、纯CSS3按钮动画等。这次，我们给大家分享一个很不错的CSS3卡通火车沿轨道行驶动画，一辆卡通样式的火车缓缓驰过，特别是火车头的动画设计，非常可爱和逼真。
CSS布局定位属性 轻松实现优美站点布局
NHF14NHNFN18781FH的专栏
09-16 694
CSS定位属性： 　　◆bottom、left、right和top 　　◆position 　　◆clip 　　◆float 　　◆clear 　　◆overflow 　　◆z-index 　　该类属性设置元素在父级元素中的位置。在设置这类元素时，如果设置长度数值，均以px作为单位，在通过style对象读取属性时，返回带单位的字符串。 　　1.
模拟中国铁路12306网页
Al_tair的博客
04-21 1408
模拟中国铁路12306网页页面展示导航栏服务栏提示栏介绍栏浮动设计旅游栏整合代码css文件图片集合html文件 大家好呀！我是小笙，本期内容是关于用html和css简单做一个网页，练习为主 技术：HTML + CSS 页面展示 导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>锐刃集团</title> <style>
夜间火车行驶css3动画js特效
ICode联盟
10-17 85
夜间火车行驶css3动画特效。
html状态栏色,html – 使用css转换更改导航栏颜色
weixin_39866881的博客
05-31 741
使用CSS3动画,你可以做到.下面给出的示例代码大约在30秒后改变颜色并在不同颜色之间切换.#navbar {background-color: #080;width: 100%;height: 100px;animation: changeColour 190s linear 2s infinite alternate;}@keyframes changeColour {0%,15% {back...
JS 实现的火车随着轨迹点行进的例子
jxdwuao的专栏
11-05 638
VML 实现的 已知初始点坐标和结束点坐标，列车分段行进的例子。
前端纯css实现动态雪花效果
08-07
不需要有任何JavaScript操作，使用纯css控制静态图片实现页面动态的雪花飘落效果。
纯css实现动态边框的示例代码
11-21
这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图：   动态边框 思路 看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法...
纯CSS3实现动态火车行驶特效.zip
11-25
纯CSS3实现动态火车行驶特效.zip
纯CSS3卡通火车沿轨道行驶动画
05-10
纯CSS3卡通火车沿轨道行驶动画，下载即使用，欢迎留言
创意游乐园跑动的小火车H5动画特效.zip
07-11
代码片段： [removed][removed] [removed][removed]
利用纯CSS实现动态的文字效果实例
01-19
原理很简单，主要用到CSS中animation属性。 接下来，我以我目前的工程项目为例，实现文字和图片的动画效果。（效果如上图GIF） HTML代码编写：复制代码代码如下:”rw-wrapper”>”span-title”>文字题目</span><h2 ...
纯CSS实现的小三角
09-25
纯CSS实现的小三角，喜欢的朋友可以参考下。
纯CSS3实现动态火车行驶特效
weixin_34174422的博客
04-16 271
上次开完飞机，这次开火车查看效果：http://hovertree.com/texiao/css3/7/效果图：代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt;&lt;meta name="viewport" content="width=device-wi
JS的事件循环机制
小火车况且况且况且的博客
06-17 1076
JS的事件循环机制 事件执行的顺序 当事件开始时,首先会进入JS主线程机制,由于JS属于单线程机制,因此存在多个任务的时候会存在等待的情况,先等待最先进入线程的事件处理完毕 这样就会出现等待的情况,如果之前的事件没有执行完成,后面的事件就会一直等待 但是类似于AJAX和setTimeout , setInterval 等待的事件,就出现了异步处理 通过将异步的事件交给异步模块处理,主线程就会去并行的处理后面的事件 当主线程空闲的时候,异步处理完成,主线程就会读取异步处理返回的callba
ES6 之 const 关键字
程序员小火车---嘟嘟嘟，开火车啦
05-22 172
欢迎大家加入我的github项目,一起学习，一起发展--->全栈工程师进阶学习站--->我个人的学习及生活小记录--->行业内最新最群的报告，工作日每日更新 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_con...
ie 动态添加css样式,IE7/8动态添加css属性'top'作为内联样式
weixin_42588555的博客
08-04 318
我正在编写其他人放在一起的代码。这个想法是，在一个页面上，你在页面上有多个表格。首先，他们只是一个图像，但当你点击图像，你可以查看整个表格。这些表格包裹在一个div覆盖层中，根据您在页面上的位置来控制表格的位置。IE7/8动态添加css属性'top'作为内联样式该脚本基本上可以找到您在页面上的位置，然后将“顶部”属性添加为内联样式，并且像素将取决于您点击哪张表以及页面上的位置。它在所有的浏览器，但...
纯css实现emoji动态表情
最新发布
02-16
当然可以通过纯CSS来实现emoji动态表情。 要实现emoji动态表情，您可以使用CSS中的“animation”属性。此属性允许您定义动画效果的各个方面，例如持续时间，动画类型，延迟等等。您可以结合使用“@keyframes”规则，定义您所需的动画帧，从而实现各种动态效果。 下面是一个示例CSS代码，演示如何通过CSS动画使笑脸emoji表情跳动： ``` .emoji { animation: jump 1s infinite; } @keyframes jump { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } ``` 上述CSS代码中，我们使用了“animation”属性来定义一个名为“jump”的动画，它的持续时间为1秒，无限循环播放。接着，我们使用“@keyframes”规则，定义了一个名为“jump”的动画帧序列，其中每个关键帧都定义了动画所需的CSS属性。在本例中，我们使用“transform”属性来改变表情的垂直位置，使其看起来像在跳跃。 这只是一个简单的示例，您可以使用更多的CSS属性和动画帧，实现各种有趣的emoji动态效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值