<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
相关推荐
su1ka1112 分钟前
re题(35)BUUCTF-[FlareOn4]IgniteMe测试界柠檬3 分钟前
面试真题 | web自动化关闭浏览器,quit()和close()的区别多多*4 分钟前
OJ在线评测系统 登录页面开发 前端后端联调实现全栈开发2301_801074154 分钟前
TypeScript异常处理小阿飞_6 分钟前
报错合计-1caperxi7 分钟前
前端开发中的防抖与节流霸气小男7 分钟前
react + antDesign封装图片预览组件(支持多张图片)susu10830189118 分钟前
前端css样式覆盖学习路上的小刘10 分钟前
vue h5 蓝牙连接 webBluetooth API&白帝&10 分钟前
vue3常用的组件间通信