使用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="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596543709831&di=2dfe6e29b274c30351015abe38c371fe&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20131212%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>