一，效果。音乐字符飘动，同时可以缩放。
二，代码直接上。使用的时候需要自己更改图片地址。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>进度条</title><style type="text/css">body{background: black;}.music-wrap{position: absolute;width: 40px;height: 40px;right: 10px;bottom: 20px;}.music-notes .note-item {position: absolute;bottom: 0;left: 50%;margin-left: -5px;width: 50px;height: 50px;opacity: 0}.music-notes .note-item.item-1.animate {-webkit-animation: note-animation 3s linear 0s infinite}.music-notes .note-item.item-2.animate {-webkit-animation: note-animation 3s linear 1s infinite}.music-notes .note-item.item-3 {width: 5px}.music-notes .note-item.item-3.animate {-webkit-animation: note-animation 3s linear 2s infinite}// 这里一个动画三个图片使用了@-webkit-keyframes note-animation {0% {opacity: 0;-webkit-transform: translate3D(0, 0, 0)}15% {opacity: .3;-webkit-transform: translate3D(-10px, 0, 0) scale(1)}30% {opacity: .5;-webkit-transform: translate3D(-22px, -6px, 0) scale(1.1)}45% {opacity: .7;-webkit-transform: translate3D(-32px, -15px, 0) scale(1.3)}60% {opacity: 1;-webkit-transform: translate3D(-40px, -25px, 0) scale(1.4)}75% {opacity: .7;-webkit-transform: translate3D(-47px, -32px, 0) scale(1.5)}90% {opacity: .3;-webkit-transform: translate3D(-56px, -40px, 0) scale(1.8)}100% {opacity: 0;-webkit-transform: translate3D(-65px, -50px, 0) scale(1.8)}}</style></head><body><div class="music-wrap"><div class="music-notes"><img src="./img/music_image01.png" class="note-item item-1 animate"><img src="./img/music_image01.png" class="note-item item-2 animate"><img src="./img/music_image02.png" class="note-item item-3 animate"></div></div></body></html>
