音乐光盘旋转效果

　　从开始的css层叠样式到现在的css3的模块发展越来越多的特技效果层出不穷的展示在我们的视野中冲击我们的感官

满足我们的求知欲下面的效果不难

相信大家都已经明白了通过变形(transform)实现动画的实现除了这个还有：转换(transition)和动画(animation)

·旋转实现

 1 @-webkit-keyframes rotate{
 2                 from{-webkit-transform: rotate(0deg)}
 3                 to{-webkit-transform: rotate(360deg)}
 4             }
 5             @-moz-keyframes rotate{
 6                 from{-moz-transform: rotate(0deg)}
 7                 to{-moz-transform: rotate(359deg)}
 8             }
 9             @-o-keyframes rotate{
10                 from{-o-transform: rotate(0deg)}
11                 to{-o-transform: rotate(359deg)}
12             }
13             @keyframes rotate{
14                 from{transform: rotate(0deg)}
15                 to{transform: rotate(359deg)}
16             }

View Code

在css样式animation调用

接着就需要定位到按钮

css写的有点乱没有用less之类的框架实现，

 1 .mgr_cir{
 2                 width: 121px;
 3                 height: 297px;
 4                 background: white;
 5                 padding-right: 22px;
 6                 padding-left: 24px;
 7                 border:1px solid #eee;
 8                 position:relative;
 9             }
10             .mgr_cir .play-btn{
11                 display: block;
12                 width: 34px;
13                 height: 42px;
14                 z-index:999;
15                 position: absolute;
16                 margin-top: 39px;
17                 margin-left: 45px;
18                 border-radius: 66% 86%;
19             }
20             .cdpic{
21                 margin: 2px;
22                 -webkit-animation: rotate 12s linear infinite;
23                 -moz-animation: rotate 12s linear infinite;
24                 -o-animation: rotate 12s linear infinite;
25                 animation: rotate 12s linear infinite;
26                 -khtml-border-radius: 50%;
27                 -ms-border-radius: 50%;
28                 -o-border-radius: 50%;
29                 -moz-border-radius: 50%;
30                 -webkit-border-radius: 50%;
31                 border-radius: 50%;
32             }
33             .pay{
34                 background: url('img/but.gif') no-repeat;
35                 background-position: -42px -4px;
36              }
37              .pause{
38                 background: url('img/but.gif') no-repeat;
39                 background-position:-1px -4px;
40              }
41              .pay:hover{
42                 background: url('img/but.gif') no-repeat;
43                 background-position: -42px -102px;
44              } 
45              .pause:hover{
46                 background: url('img/but.gif') no-repeat;
47                 background-position: -1px -102px;
48              }

View Code

·完结

这只是css3中比较单一的动画复杂的还可以通过html5的canvas实现

仅供参考下载这里