音乐播放器 旋转播放动画实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
html {
margin: 0;
padding: 0;
}
h4{
width: 300px;
text-align: center;
color: red
}
.animatDiv {
width: 300px;
height: 300px;
border-radius: 300px;
text-align: center;
background: url("http://img.25pp.com/uploadfile/soft/images/2015/0813/20150813104305388.jpg") 0 0 no-repeat;
background-size: 100% 100%;
color: aliceblue;
display: flex;
align-items: center;
justify-content: center
}
#centerBtn{
width: 50px;
height: 50px;
position: absolute;
left: 125px;
top: 180px;
z-index: 1
}
#centerBtn img{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<h4>音乐播放器</h4>
<div id="centerBtn"><img id="btnImg" src="./bofang.png" alt="" onclick="control()" ></div>
<div class="animatDiv" id="div"></div>
<script>
var m;
var n = 0;
var canbegin = true;
function control() {
if (canbegin) {
m = setInterval(function () {
n++;
var deg = 1 * n;
document.getElementById('div').style.transform = "rotate(" + deg + "deg)";
document.getElementById("btnImg").src = "./zanting.png"
}, 10);
canbegin = false
} else {
clearInterval(m)
document.getElementById("btnImg").src = "./bofang.png"
canbegin = true
}
}
</script>
</body>
</html>
效果图：