基于HTML5的齿轮动画特效

2019-01-28 15:21:45于丽
  •     -webkit-animation: rotate 12000ms linear infinite;   
  •  -moz-animation: rotate 12000ms linear infinite;     -ms-animation: rotate 12000ms linear infinite;   
  •  animation: rotate 12000ms linear infinite;    }   
  • #shadow9{     width:200px;   
  •  height:200px;     -webkit-border-radius:100px;   
  •  -moz-border-radius:100px;     border-radius:100px;   
  •  position:absolute;     left:214px;   
  •  top:113px;    }   
  • #gear7{     background: url(FgFnjks.png) no-repeat -371px 0;   
  •  width: 108px;     height: 108px;   
  •  position:absolute;     left:260px;   
  •  top:159px;      
  •  -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;   
  • }    #shadow7{   
  •  width:76px;     height:76px;   
  •  -webkit-border-radius:38px;     -moz-border-radius: 38px;   
  •  border-radius: 38px;     position:absolute;   
  •  left:276px;     top:175px;   
  • }      
  • /*gear-system-4*/   #gear6{   
  •  background: url(FgFnjks.png) no-repeat 0 -1931px;     width: 134px;   
  •  height: 134px;     position:absolute;   
  •  left:305px;     bottombottom:212px;   
  •     -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;    }