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。。