`

纯css 实现动态小火车

    博客分类：
  • css
 
阅读更多
主要的知识点在于
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;
}

分享到：
| css 各种选择器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯CSS3实现动态火车行驶特效.zip

    这个名为“纯CSS3实现动态火车行驶特效”的项目，就是利用了现代浏览器对CSS3的强大支持，创建了一个无需JavaScript插件或jQuery库的火车行驶动画。接下来，我们将详细探讨这个项目中涉及的技术和知识点。 首先，...

    纯css3绘制行驶火车动画特效

    "纯css3绘制行驶火车动画特效"是一个利用CSS3的特性来创建动态的、逼真的火车行驶场景的技术实践。这个项目可能包含多个CSS3的关键技术，如动画（animation）、变换（transform）、伪类（pseudo-classes）以及渐变...

    纯CSS3实现动态火车行驶特效特效代码

    【标题】"纯CSS3实现动态火车行驶特效特效代码"涉及到的是前端开发中的CSS3技术，主要用于创建网页上的视觉效果。CSS3是层叠样式表的第三版，它提供了更强大的选择器、更多的布局模式以及丰富的动画和过渡效果。在这...

    纯CSS3实现行驶的玩具火车动画效果源码.zip

    该压缩包文件“纯CSS3实现行驶的玩具火车动画效果源码.zip”包含了一个使用纯CSS3技术制作的玩具火车行驶动画的示例。这个项目着重展示了CSS3在创建动态、交互式图形方面的强大能力，尤其在不依赖JavaScript的情况下...

    纯CSS3夜间行使的火车动画特效.zip

    【标题】"纯CSS3夜间行使的火车动画特效"是一个基于CSS3技术实现的网页动态效果，它模拟了火车在夜晚行驶的场景，为网站增添了一丝生动与趣味性。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，相比前两...

    纯CSS3铁桥上火车行驶动画特效

    纯CSS3技术在近年来已经成为了网页设计领域中不可或缺的一部分，其强大的表现力和无需JavaScript即可实现的动态效果，让开发者们得以构建出丰富多彩的网页交互体验。本篇我们将深入探讨“纯CSS3铁桥上火车行驶动画...

    纯css3绘制铁轨上正在行驶的列车动画特效源码.zip

    【标题】中的“纯css3绘制铁轨上正在行驶的列车动画特效源码”表明了这是一个使用CSS3技术实现的动态效果，主要聚焦在创建一个火车在铁轨上移动的视觉展示。CSS3是 Cascading Style Sheets（层叠样式表）的第三个...

    纯CSS3夜间行使的火车动画特效

    【纯CSS3夜间行使的火车动画特效】是一种利用纯CSS3技术实现的视觉效果，它在网页中模拟了夜晚高架桥上行驶的卡通火车场景。这种特效无需JavaScript或者其他编程语言，完全依赖于CSS3的强大功能，展示了CSS3在动态...

    纯CSS3铁轨上列车动画特效特效代码

    在本实例中，“纯CSS3铁轨上列车动画特效”充分利用了CSS3的新特性来创建一个逼真的动画场景，让列车在月光下的铁轨上缓缓行驶，营造出一种深夜晚行的氛围。 1. **动画（Animations）**: CSS3引入了`@keyframes`...

Magicbox
Global site tag (gtag.js) - Google Analytics