纯css 实现动态小火车

主要的知识点在于
1、对相对定位绝对定位的学习
2、图片渐变的学习
3、图片阴影的学习
4、border-radius
5、动画

  
  
  
  
  





  

    

    

    

    

    

    

    

    

    

      

    
    

    

    

    

    

      

      

      

    
    

    

    

      

    
    

      

        

        

        

        

        

      
    
    

      

        XXX号火车
      
      欢迎乘坐
    
    

    

    

      

      

      

        

        

        

        

        

        

        

        

        

      
      

    
    

      

      

      

        

        

        

        

        

        

        

        

        

      
      

    

    

      

        

          

          

          

          

          

          

          

        
      
    
    

      

        

          

          

          

          

          

          

          

        
      
    
    

      

        

          

          

          

          

          

          

          

        
      
    
    

      

        

          

          

          

          

          

          

          

        
      
    
    

      

        

          

          

          

          

          

          

          

        
      
    
    

      

        

          

          

          

          

          

          

          

        
      
    
    

      

      

      

      

      

      

    

    

    

    


    

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

    
    

      

      

      

      

      

      

      

      

    
  

/* 
 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;
}