在制作音乐播放器时需要哪种在播放音乐时音乐的背景图旋转效果并同时要有那种声波扩散的效果，一开始直接是通过js来进行动画配置及控制，发现这样做要写一推js好烦，就想着用css3动画和过度效果来看看能不能达到效果，结果一看出来效果还很不错（简单又方便）。
直接上代码：
<!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>
预览地址: https://codepen.io/x447618716/pen/ZEERbpM
播放效果通过音频状态来控制
网友评论