前端文档

css3圆环形旋转

日期:2017-10-20 阅读:450

http://www.w3cplus.com/demo/438.html

http://cssdeck.com/labs/minimalist-css3-spinner

--------------

 /*earth go*/
 $('.jsearthgo').click(function(){ 
$(this).hide();
$('.jsearthstop').show();  
   $('.d11earth').css({"animation": "earth2 1s linear infinite"});      ---这里是2,考虑到ie不兼容的问题,才这样处理。
 
 });
 
  $('.jsearthstop').click(function(){ 
$(this).hide();
$('.jsearthgo').show();
 $('.d11earth').css({"animation": "none"});       ---这里是none,考虑到ie不兼容的问题,才这样处理。
  
  
 });
------------
css:
/*earth circle*/
 
@keyframes earth2{
0%{ -webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(-360deg);}
}
 
 
 
@keyframes earth{
0%{ -webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(-360deg);}
}
 
.d11earth {
animation-name: earth;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 6s;
}

 

 

 

 

<<点击返回