音乐光盘旋转效果

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

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

            

 

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

·旋转实现

@-webkit-keyframes rotate{
                from{-webkit-transform: rotate(0deg)}
                to{-webkit-transform: rotate(360deg)}
            }
            @-moz-keyframes rotate{
                from{-moz-transform: rotate(0deg)}
                to{-moz-transform: rotate(359deg)}
            }
            @-o-keyframes rotate{
                from{-o-transform: rotate(0deg)}
                to{-o-transform: rotate(359deg)}
            }
            @keyframes rotate{
                from{transform: rotate(0deg)}
                to{transform: rotate(359deg)}
            }

在css样式animation调用 

接着就需要定位到按钮

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

.mgr_cir{
                width: 121px;
                height: 297px;
                background: white;
                padding-right: 22px;
                padding-left: 24px;
                border:1px solid #eee;
                position:relative;
            }
            .mgr_cir .play-btn{
                display: block;
                width: 34px;
                height: 42px;
                z-index:999;
                position: absolute;
                margin-top: 39px;
                margin-left: 45px;
                border-radius: 66% 86%;
            }
            .cdpic{
                margin: 2px;
                -webkit-animation: rotate 12s linear infinite;
                -moz-animation: rotate 12s linear infinite;
                -o-animation: rotate 12s linear infinite;
                animation: rotate 12s linear infinite;
                -khtml-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                border-radius: 50%;
            }
            .pay{
                background: url('img/but.gif') no-repeat;
                background-position: -42px -4px;
             }
             .pause{
                background: url('img/but.gif') no-repeat;
                background-position:-1px -4px;
             }
             .pay:hover{
                background: url('img/but.gif') no-repeat;
                background-position: -42px -102px;
             } 
             .pause:hover{
                background: url('img/but.gif') no-repeat;
                background-position: -1px -102px;
             }

·完结

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

仅供参考 下载这里