标签：
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<video style="display: none;" id="MVO" loop="start" autoplay="true" src="img/1"></video>
<div class="box">
<img class="pic" src="img/1.jpg"/>
<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>
</html>
标签：
原文地址：http://www.cnblogs.com/vivenZ/p/4785347.html
