基于HTML5的齿轮动画特效

2019-01-28 15:21:45于丽
  • #shadow6{     width:98px;   
  •  height:98px;     -webkit-border-radius:49px;   
  •  -moz-border-radius: 49px;     border-radius: 49px;   
  •  position:absolute;     left:323px;   
  •  bottombottom:230px;    }   
  • #gear4{     background: url(FgFnjks.png) no-repeat 0 -1627px;   
  •  width: 69px;     height: 69px;   
  •  position:absolute;     left:337px;   
  •  bottombottom:245px;      
  •  -webkit-animation: rotate-back 10000ms linear infinite;     -moz-animation: rotate-back 10000ms linear infinite;   
  •  -ms-animation: rotate-back 10000ms linear infinite;     animation: rotate-back 10000ms linear infinite;   
  • }      
  • /*gear-system-5*/   #gear12{   
  •  background: url(FgFnjks.png) no-repeat 0 -530px;     width: 164px;   
  •  height: 164px;     position:absolute;   
  •  left:208px;     bottombottom:85px;   
  •     -webkit-animation: rotate 8000ms linear infinite;   
  •  -moz-animation: rotate 8000ms linear infinite;     -ms-animation: rotate 8000ms linear infinite;   
  •  animation: rotate 8000ms linear infinite;    }   
  • #shadow12{     width:124px;   
  •  height:124px;     -webkit-border-radius:62px;   
  •  -moz-border-radius:62px;     border-radius:62px;   
  •  position:absolute;     left:225px;   
  •  bottombottom:107px;    }   
  • #gear11{     background: url(FgFnjks.png) no-repeat 0 -356px;   
  •  width: 125px;     height: 124px;   
  •  position:absolute;     left:228px;   
  •  bottombottom:105px;