<view class="time-box">
<view class="start-taste-line">
<view class="hr1"> </view>
<view class="hr2"> </view>
<view class="hr3"> </view>
<view class="hr4"> </view>
<view class="hr5"> </view>
<view class="hr6"> </view>
<view class="hr7"> </view>
<view class="hr8"> </view>
</view>
</view>
.time-box .start-taste-line view{background-color:#c8c8c8;width:6rpx;height:12rpx;border-radius:1rpx;margin:0 8rpx;display:inline-block;border:none}
.hr1{animation:note .4s ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-1s}
.hr2{animation:note .4s ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-.9s}
.hr3{animation:note .4s ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-.8s}
.hr4{animation:note .4s ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-.7s}
.hr5{animation:note .4s ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-.6s}
.hr6{animation:note .4s ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-.5s}
.hr7{animation:note .4s ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-.4s}
.hr8{animation:note .4s ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:-.3s}
@keyframes note{from{transform:scaleY(1)}
to{transform:scaleY(4)}
}
css3模拟音频播放
coldriversnow2023-12-07 9:28
相关推荐
前端小小王34 分钟前
React Hooks迷途小码农零零发44 分钟前
react中使用ResizeObserver来观察元素的size变化娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行荆州克莱2 小时前
mysql中局部变量_MySQL中变量的总结ekskef_sef3 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作sunshine6414 小时前
【CSS】实现tag选中对钩样式mo47764 小时前
Webrtc音频模块(四) 音频采集icy、泡芙4 小时前
T527-----音频调试易我数据恢复大师4 小时前
怎么提取音频保存到本地?电脑音频提取方法