在制作音樂播放器時需要哪種在播放音樂時音樂的背景圖旋轉(zhuǎn)效果并同時要有那種聲波擴散的效果，一開始直接是通過js來進行動畫配置及控制，發(fā)現(xiàn)這樣做要寫一推js好煩，就想著用css3動畫和過度效果來看看能不能達到效果，結(jié)果一看出來效果還很不錯（簡單又方便）。
直接上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>波紋動畫特效</title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
height: 100%;
background-color: #51c77d;
}
.animation{
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
top: 50%;
left: 50%;
border: 3px solid rgba(0,0,0,0.1);
animation: rotate 10s linear infinite;
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
.animation:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
border: 1px solid #fff;
border-radius: 50%;
/*border-image:url(https://www.w3school.com.cn/i/border.png) 30 30 10 stretch;*/
/*background-color: transparent;*/
/*background-image: url(https://www.w3school.com.cn/i/border.png);*/
/*background-clip:border-box;*/
/*background-repeat:no-repeat;*/
opacity: 0;
animation: ripple 2s linear 1s infinite ;
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
.animation:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
border: 1px solid #fff;
border-radius: 50%;
/*border-image:url(https://www.w3school.com.cn/i/border.png) 30 30 10 stretch; !*round repeat stretch*!*/
/*background-image: url(https://www.w3school.com.cn/i/border.png) ;*/
/*background-clip:border-box;*/
/*background-repeat:no-repeat;*/
/*background-color: transparent;*/
opacity: 0;
animation: ripple 2s linear infinite;
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
.ripple{
animation-play-state:running;
-webkit-animation-play-state:running;
}
.ripple:before{
animation-play-state:running;
-webkit-animation-play-state:running;
}
.ripple:after{
animation-play-state:running;
-webkit-animation-play-state:running;
}
@keyframes ripple {
0% {transform: scale(1);opacity: 0.0;}
25% {transform: scale(1.25) ;opacity: 0.1;}
50% {transform: scale(1.5);opacity: 0.3;}
75% {transform: scale(1.75) ;opacity: 0.5;}
100% {transform: scale(2) ;opacity: 0.0;}
}
@keyframes rotate {
0% {transform:rotate(0deg);}
25% {transform:rotate(90deg);}
50% {transform:rotate(180deg);}
75% {transform:rotate(270deg);}
100% {transform:rotate(360deg);}
}
#play{
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 4px;
color: #fff;
border: 1px solid #fff;
margin-top: 15px;
cursor: pointer;
}
#pause{
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 4px;
color: #fff;
border: 1px solid #fff;
margin-top: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="animation ">
<img style="display: block; width: 100%; height: 100%; border-radius: 50%;" src="http://p1.music.126.net/DSTg1dR7yKsyGq4IK3NL8A==/109951163046050093.jpg?param=300x300">
<audio id="audio" src="http://music.163.com/song/media/outer/url?id=513360721.mp3" preload="load">您的瀏覽器不支持 audio 標簽。</audio>
</div>
<div id="play">播放</div>
<div id="pause">暫停</div>
<script>
document.getElementById("play").onclick = function () {
document.querySelector(".animation").classList.add("ripple");
document.querySelector("#audio").play();
};
document.getElementById("pause").onclick = function () {
document.querySelector(".animation").classList.remove("ripple");
document.querySelector("#audio").pause();
}
</script>
</body>
</html>
預(yù)覽地址: https://codepen.io/x447618716/pen/ZEERbpM
播放效果通過音頻狀態(tài)來控制
