<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
相关推荐
brief of gali10 分钟前
记录一个奇怪的前端布局现象Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计木子02042 小时前
前端VUE项目启动方式GISer_Jing2 小时前
React核心功能详解(一)捂月2 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用滴水可藏海2 小时前
Chrome离线安装包下载