Music Disc Rotation effect

　　From the beginning of the CSS cascading style to the current CSS3 module development more and more special effects are emerging in our vision of the impact of our senses

To satisfy our thirst for knowledge the following effect is not difficult

I'm sure you all know that. Implementation of animation through deformation (transform) Besides this: conversion (transition) and animation (animation)

• Rotary Implementation

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{Ten From{-o-transform:Rotate (0deg)} One  to{-o-transform:Rotate (359deg)} A             } - @keyframes Rotate{ - From{transform:Rotate (0deg)} the  to{Transform:Rotate (359deg)} -             }

View Code

Called in CSS style animation

Then we need to locate the button.

CSS is a bit confusing, not with the less-like framework,

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}Ten . Mgr_cir. play-btn{ One Display:Block; A width:34px; - Height:42px; - Z-index:999; the position:Absolute; - Margin-top:39px; - Margin-left:45px; - Border-radius:66% 86%; +} - . Cdpic{ + margin:2px; A -webkit-animation:Rotate 12s Linear infinite; at -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%; in -moz-border-radius:50%; - -webkit-border-radius:50%; to Border-radius:50%; +} - . Pay{ the background:url (' img/but.gif ') no-repeat; * background-position:-42px-4px; $}Panax Notoginseng . Pause{ - background:url (' img/but.gif ') no-repeat; the background-position:-1px-4px; +} A . Pay:hover{ the background:url (' img/but.gif ') no-repeat; + background-position:-42px-102px; -} $ . Pause:hover{ $ background:url (' img/but.gif ') no-repeat; - background-position:-1px-102px; -}

View Code • End

This is only a single animation in the CSS3 complex can also be achieved through the HTML5 canvas

For reference only download here

Music Disc Rotation effect