首页 前端知识 css3模拟音频播放

css3模拟音频播放

2024-02-26 20:02:53 前端知识 前端哥 900 955 我要收藏

<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)}
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2722.html
标签
音视频
评论
会员中心 联系我 留言建议 回顶部
复制成功!