纯CSS实现语音动画.docx
需积分: 50 188 浏览量
2021-05-11
10:32:40
上传
评论
收藏 20KB DOCX 举报
纯 CSS 实现语音动画
效果图
Html 代码
<divclass="voicewave">
<spanv-for='(item,i)in15':key='i'></span>
</div>
使用了 vue 语法，如果不用 vue 语法则直接加 15 个 span 即可
CSS 代码 (使用了 less 语法)
.voicewave{
border:1pxsolidsilver;
margin-top:20px;
width:175px;
height:100px;
span{
display:block;
background-color:#f1f1f1;
width:7px;
height:10px;
border-radius:14px;
margin-right:5px;
float:left;
}
:last-child{
margin-right:0px;
}
:nth-child(1){
animation:wave2.5s1.4sinfinitelinear;
}
:nth-child(2){
资源评论
