音乐光盘旋转效果

　　从开始的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实现 

仅供参考 下载这里

posted @ 2015-07-21 18:40  佰白  Views(574)  Comments(0)  Edit  收藏  举报