<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style type="text/css" media="screen">
.btnvv {
background: url(bgmBtn.svg);
background-size: 100% 100%;
position: absolute;
width: 30px;
height: 30px;
top: 3%;
right: 1%;
z-index: 999;
cursor:pointer ;
}
.btnonclick{
animation:circle 1s infinite linear;
}
@-webkit-keyframes circle{
0%{ transform:rotate(0deg); }
50%{ transform:rotate(-180deg); }
100%{ transform:rotate(-360deg); }
}
</style>
<body>
<div class="btnvv"></div>
<audio id="videeo" autoplay="" loop="loop" src="VA0DAFWBrJWAMyVfAGXYX-4r0-M895.mp3"></audio>
</body>
</html>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
//音樂
$(function(){
var videeo=document.getElementById("videeo");
$(".btnvv").addClass("btnonclick");
$(".btnvv").click(function(){
if (videeo.paused) {
videeo.play();
$(".btnvv").addClass("btnonclick");
}
else{
videeo.pause();
$(".btnvv").removeClass("btnonclick");
}
})
})
</script>
