H5 page background music, C33 rotation effect (original)

We often visit the H5 page (such as e-cards, dynamic music albums, etc.), you will see a rotation of the upper right corner of the music icon, click to control whether the music play, then how this effect is achieved?

Demo

The HTML code is as follows:

1 <DivID= "Audio_btn"class= "Rotate">2     <AudioLoop src= "Bg_audio.mp3"ID= "Media"AutoPlay=""preload=""></Audio>3 </Div>

The CSS code is as follows:

1 #audio_btn{2 width:30px;3 Height:30px;4 Background-image:URL (normalmusic.svg);5 background-size:contain;6}7 8 . Rotate{9 -webkit-animation:rotating 1.2s Linear infinite;Ten -moz-animation:rotating 1.2s Linear infinite; One -o-animation:rotating 1.2s Linear infinite; A Animation:rotating 1.2s Linear infinite -} -  the @-webkit-keyframes Rotating{ - From {-webkit-transform:Rotate (0)} -  to{-webkit-transform:Rotate (360deg)} - } +  - @keyframes Rotating{ + From {transform:Rotate (0)} A  to{Transform:Rotate (360deg)} at } - @-moz-keyframes Rotating{ - From {-moz-transform:Rotate (0)} -  to{-moz-transform:Rotate (360deg)} - }

Using the Keyframes combined with transfrom to achieve the CSS rotation effect.

(My other article about keyframes http://www.cnblogs.com/shizq/p/5063610.html)

The JS code is as follows:

1. Implement click icon, rotation pause, then click Rotate

1 $ ("#audio_btn"). Click (function() {2     $ (this//  Control the music icon rotation or pause 3 })

2. While the picture is paused, the background music is also paused, and the music continues to play when the picture rotates.

In combination with the above code, modify the following:

1 varx = document.getElementById ("Media"); 2$(function(){3$ ("#audio_btn"). Click (function(){4$( This). Toggleclass ("rotate");//controls the rotation or suspension of the music icon5         6         //Control background music playback or pause7         if($( This). Hasclass ("Rotate")){8 X.play ();9}Else{Ten x.pause (); One         } A     }) -});

Because H5 's audio/video comes with the method of pause () and play (), we can call it directly. However, it is important to note that it is not a method of jquery, if directly written as $ (audio_btn). Find ("audio"). Pause (), is invalid. So use the native JS Dom to write.

H5 page background music, C33 rotation effect (original)