CSS写的音频波纹效果

最新推荐文章于 2024-05-01 22:13:13 发布

weixin_33802505

最新推荐文章于 2024-05-01 22:13:13 发布

阅读量4.5k

点赞数

文章标签： ui python javascript ViewUI

原文链接：https://my.oschina.net/u/3883810/blog/1828204

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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

转载于:https://my.oschina.net/u/3883810/blog/1828204