純粋なcssは動的な小型列車を実現する

36892 ワード
css
主な知識点は
1、相対位置絶対位置の学習
2、グラデーションの勉強
3、影の勉強
4、border-radius
5、アニメーション





  
  
   CSS3          
  
  





  

    

    

    

    

    

    

    

    

    

      

    

    

    

    

    

    

      

      

      

    

    

    

    

      

    

    

      

            

  •         

  •         

  •         

  •         

  •       

    

    

      
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;
}
CSSグローバルスタイル
あなたの知らないCSSの常用属性(絶えず更新して、未完は続きます)