css3animation模仿百度音乐的唱片旋转效果
好久没更新blog，补上几篇技术性的文章。好吧，第一篇是关于css3动画animation的使用，要用到keyframes规则。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="jquery.min.js"></script> 7 <script> 8 $(function(){ 9 /*$('.wrap').children('i').click(function(){ 10 $(this).toggleClass('action'); 11 if($(this).prev().css('-webkit-animation-play-state') == 'paused'){ 12 $(this).prev().css({ 13 '-webkit-animation-play-state':'running' 14 }); 15 }else{ 16 $(this).prev().css({ 17 '-webkit-animation-play-state':'paused' 18 }); 19 } 20 if($(this).prev().css('-moz-animation-play-state') == 'paused'){ 21 $(this).prev().css({ 22 '-moz-animation-play-state':'running' 23 }); 24 }else{ 25 $(this).prev().css({ 26 '-moz-animation-play-state':'paused' 27 }); 28 } 29 });*/ 30 $('.wrap>i').click(function(){ 31 $(this).toggleClass('action'); 32 $(this).prev().toggleClass('pause'); 33 }); 34 35 }); 36 </script> 37 <style type="text/css"> 38 .wrap{ 39 width:120px; 40 height:120px; 41 position:relative; 42 } 43 .avatar-pic{ 44 width:120px; 45 height:120px; 46 border-radius:50%; 47 overflow:hidden; 48 display:block; 49 cursor:default; 50 } 51 .wrap>i{ 52 position:absolute; 53 top:42px; 54 left:42px; 55 width:36px; 56 height:36px; 57 outline:none; 58 border-radius:50%; 59 cursor:pointer; 60 } 61 .wrap>i:hover{ 62 background-color:rgba(0,0,0,.4); 63 } 64 .zantin{ 65 background:url(icons_bds.png) no-repeat 0px -408px; 66 } 67 .action{ 68 background:url(icons_bds.png) no-repeat -96px -408px; 69 } 70 71 72 73 .avatar{ 74 animation:rotator 10s linear infinite; 75 -webkit-animation:rotator 10s linear infinite; 76 -moz-animation:rotator 10s linear infinite; 77 -o-animation:rotator 10s linear infinite; 78 -ms-animation:rotator 10s linear infinite; 79 80 -webkit-animation-play-state:running; 81 -moz-animation-play-state:running; 82 -o-animation-play-state:running; 83 -ms-animation-play-state:running; 84 animation-play-state:running; 85 } 86 .pause{ 87 animation-play-state:paused; 88 -webkit-animation-play-state:paused; 89 -moz-animation-play-state:paused; 90 -o-animation-play-state:paused; 91 -ms-animation-play-state:paused; 92 } 93 94 @keyframes rotator{ 95 from{transform:rotate(0deg);} 96 to{transform:rotate(360deg);} 97 } 98 @-webkit-keyframes rotator{ 99 form{-webkit-transform:rotate(0deg);} 100 to{-webkit-transform:rotate(360deg);} 101 } 102 @-moz-keyframes rotator{ 103 form{-moz-transform:rotate(0deg);} 104 to{-moz-transform:rotate(360deg);} 105 } 106 @-o-keyframes rotator{ 107 form{-o-transform:rotate(0deg);} 108 to{-o-transform:rotate(360deg);} 109 } 110 @-ms-keyframes rotator{ 111 form{-ms-transform:rotate(0deg);} 112 to{-ms-transform:rotate(360deg);} 113 } 114 </style> 115 </head> 116 <body> 117 <div class="wrap"> 118 <a class="avatar-pic avatar" href="javascript:;"> 119 <img src="l5.jpg" alt="haha"> 120 </a> 121 <i class="zantin action"></i> 122 </div> 123 </body> 124 </html>
css3看起来非常美好，但是实际使用中还是存在不少的不确定性。如果不能看到已经实现的代码模板，你很难确信自己的代码格式就一定正确。所以你可以到http://daneden.me/animate/来观察各种动画效果，选择自己喜欢的动画并生成代码，下载下来后再按照自己的需求来编写动画代码。这样会让你的动画效果实现起来事半功倍（不要担心它达不到你的要求，上面有很多的效果，你可以自己组合，只要你的想象力够丰富）。
