音樂光碟片旋轉效果

標籤：

　　從開始的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實現 

僅供參考 下載這裡

音樂光碟片旋轉效果