使用css动画实现网易云音乐播放界面波浪动画效果

通过实现CSS实现仿网易云音乐播放界面动画效果，最终的效果如下

界面布局

图片也是实现滚动效果的，使用四个div，来标识每一帧波动的效果。

<div class="container-wrap"><div class="container"><div class="more"></div><div class="more"></div><div class="more"></div><div class="more"></div><div class="item"><img src="/timg?image&quality=80&size=b9999_10000&sec=1596543709831&di=2dfe6e29b274c30351015abe38c371fe&imgtype=0&src=http%3A%2F%%2Fimages%2F1212%2Fsy_51552288528.jpg"></div></div></div>

CSS样式

通过实现css3中的transform中的rotate进行旋转，scale实现缩放。

<style type="text/css">* {margin: 0;padding: 0;}.container-wrap {width: 750px;height: 1000px;display: block;margin: 50px auto 0 auto;overflow: hidden;}.container {position: relative;width: 300px;height: 300px;margin: 0 auto;border-radius: 50%;margin-top: 200px;}.container .more {position: absolute;opacity: 1;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 300px;height: 300px;border-radius: 50%;border: 1px solid black;animation: routerView 4s linear 0s infinite;}.container .more::after {content: "";position: absolute;top: -4px;left: 50%;width: 6px;height: 6px;overflow: hidden;border-radius: 5px;background-color: orangered;}.container .more:nth-child(2) {animation-delay: 1s;}.container .more:nth-child(3) {animation-delay: 2s;}.container .more:nth-child(4) {animation-delay: 3s;}.item {width: 300px;height: 300px;border-radius: 50%;overflow: hidden;}.item img {width: 100%;height: 100%;animation: rotation 12s linear infinite;}@keyframes rotation {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}@keyframes routerView {0%{opacity: 1;transform: rotate(0deg) scale(1);}25%{opacity: 0.75;transform: rotate(72deg) scale(1.25);}50%{opacity: 0.5;transform: rotate(144deg) scale(1.5);}75%{opacity: 0.25;transform: rotate(216deg) scale(1.75);}100%{opacity: 0;transform: rotate(360deg) scale(2);}}</style>