音乐光盘旋转效果

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

仅供参考 下载这里