<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title></title>
<script src= "Js/jquery-2.1.0.js" type= "Text/javascript" charset= "Utf-8" ></script>
<style>
body{
Background-color:azure
}
. box{
width:100px;
height:100px;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
-ms-border-radius:50px;
Overflow:hidden;
position:relative;
Margin:auto;
}
. pic{
width:100%;
Position:absolute;
top:0;
left:0;
ANIMATION:PQL 4s linear infinite;
-WEBKIT-ANIMATION:PQL 4s linear infinite;
-MOZ-ANIMATION:PQL 4s linear infinite;
-MS-ANIMATION:PQL 4s linear infinite;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
-ms-border-radius:50px;
}
@-webkit-keyframes pql{
100%{
-webkit-transform:rotate (360DEG);
-moz-transform:rotate (360DEG);
-ms-transform:rotate (360DEG);
Transform:rotate (360DEG);
}
}
@-moz-keyframes pql{
100%{
-webkit-transform:rotate (360DEG);
-moz-transform:rotate (360DEG);
-ms-transform:rotate (360DEG);
Transform:rotate (360DEG);
}
}
@-ms-keyframes pql{
100%{
-webkit-transform:rotate (360DEG);
-moz-transform:rotate (360DEG);
-ms-transform:rotate (360DEG);
Transform:rotate (360DEG);
}
}
@keyframes pql{
100%{
-webkit-transform:rotate (360DEG);
-moz-transform:rotate (360DEG);
-ms-transform:rotate (360DEG);
Transform:rotate (360DEG);
}
}
. mc{
width:30px;
height:30px;
Position:absolute;
border-radius:15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
-ms-border-radius:15px;
top:50%;
left:50%;
Margin-top: -15px;
Margin-left: -15px;
Background:url (img/musicpause1.png) center Center;
background-size:100%;
Cursor:pointer;
}
</style>
<body>
<video style= "Display:none;" id= "MVO" loop= "Start" autoplay= "true" src= "IMG/1" ></video>
<div class= "box" >
<div class= "MC" >
</div>
</div>
</body>
<script>
var myvideo = document.getElementById ("MVO");
$ (". Mc"). Click (function () {
if (myvideo.paused) {
Myvideo.play ();
$ (". Pic"). CSS ("Animation-play-state", "Running");
$ (". Mc"). CSS ("background-image", "url (img/musicpause1.png)")
} else{
Myvideo.pause ();
$ (". Pic"). CSS ("animation-play-state", "paused");
$ (". Mc"). CSS ("background-image", "url (img/maincont1.png)")
}
})
</script>
Simple Rotary CD Maker