CSS写的音频波纹效果

因为有这样一个需求，须要在播放音频的时候，放一段音频波纹，上下跳动的那种。因而乎，就去试试

 HTML：

<ul class="aubox">
			<li class="au1"></li>
			<li class="au2"></li>
			<li class="au3"></li>
			<li class="au4"></li>
			<li class="au5"></li>
			<li class="au6"></li>
			<li class="au7"></li>
		</ul>

CSS：

.aubox{
			display: flex;
			align-items: flex-end;  //重要属性，让hight翻转过来，往上延伸
		}
		.auItem{
			width: 1px;
			margin-right: 5px;
			list-style: none;
			background: black;
			height:20px;
		}
		.au1{
			animation: audio .5s linear .1s infinite alternate;
		}
		.au2{
			animation: audio .5s linear .2s infinite alternate;
		}
		.au3{
			animation: audio .5s linear .5s infinite alternate;
		}
		.au4{
			
		}
		.au5{
			animation: audio .5s linear .2s infinite alternate;
		}
		.au6{
			animation: audio .5s linear .3s infinite alternate;
		}
		.au7{
			animation: audio .5s linear .1s infinite alternate;
		}
		@keyframes audio{
			from{height: 1px;}
			to{height: 20px;}
		}

直接复制上去就能够看效果了，原本想着让UI给作个GIF，UI一句不会GG。。