css3 音乐播放器动画 |html5 css3动态网站

/* 设置音乐播放器的容器 */
.music-player{
width: 400px;
height: 50px;
background-color: #222;
border-radius: 25px;
padding: 10px;
box-shadow: 0 0 50px #000;
}
/* 设置播放图标 */
.play-button{
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
position: relative;
float: left;
margin-top: 10px;
margin-left: 10px;
cursor: pointer;
}
.play-button:before{
content: "";
width: 10px;
height: 10px;
border-top: 10px solid transparent;
border-left: 20px solid #000;
border-bottom: 10px solid transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 设置音量图标 */
.volume-button{
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
position: relative;
float: left;
margin-top: 10px;
margin-left: 10px;
cursor: pointer;
}
.volume-button:before{
content: "";
width: 10px;
height: 10px;
border-top: 10px solid #000;
border-bottom: 10px solid #000;
border-right: 10px solid transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 设置音乐进度条 */
.progress{
width: 200px;
height: 10px;
background-color: #555;
position: relative;
float: left;
margin-top: 20px;
margin-left: 10px;
}
/* 设置播放进度 */
.progress .bar{
width: 50%;
height: 100%;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
transform-origin: left top;
transition: width .2s ease-in-out;
}
.progress.playing .bar{
animation: animation-progress 1s linear;
}
/* 音乐进度条动画 */
@keyframes animation-progress {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
/* 音量进度条 */
.volume{
width: 50px;
height: 10px;
background-color: #555;
position: relative;
float: left;
margin-top: 20px;
margin-left: 10px;
}
/* 音量进度 */
.volume .bar{
width: 50%;
height: 100%;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
transform-origin: left top;
transition: width .2s ease-in-out;
}

以上代码可以实现一个简单的音乐播放器动画。其中，play-button和volume-button是设定播放按钮和音量按钮的样式，progress和volume是设置进度条的样式，而animation-progress则是一个关键的动画，用来控制进度条的播放效果。