CSS的音频波浪

最新推荐文章于 2024-09-01 01:48:48 发布

qq_35533830

最新推荐文章于 2024-09-01 01:48:48 发布

阅读量389

点赞数 3

文章标签： css 音视频前端

本文链接：https://blog.csdn.net/qq_35533830/article/details/140787299

版权

						<view class="startBox">
							<view class="ripple">
								<div class="music">
									<span class="line" :class="{
						    'line-Reverse': i % 2 > 0,
						    animationNone: recorderStatus == 3,
						  }" :style="{ 'animation-delay': (i - 1) * 0.1 + 's' }" v-for="i in 4" :key="getItemKey(i, 1)"></span>
									<span class="line" :class="{
						    'line-Reverse': i % 2 > 0,
						    animationNone: recorderStatus == 3,
						  }" :style="{ 'animation-delay': (i - 1) * 0.1 + 's' }" v-for="i in 4"
										:key="getItemKey(i, 2)"></span><span class="line" :class="{
						    'line-Reverse': i % 2 > 0,
						    animationNone: recorderStatus == 3,
						  }" :style="{ 'animation-delay': (i - 1) * 0.1 + 's' }" v-for="i in 4" :key="getItemKey(i, 3)"></span>
									<span class="line" :class="{
						    'line-Reverse': i % 2 > 0,
						    animationNone: recorderStatus == 3,
						  }" :style="{ 'animation-delay': (i - 1) * 0.1 + 's' }" v-for="i in 4" :key="getItemKey(i, 4)"></span>
								</div>
							</view>
						</view>

   .music {
       border-bottom: 0;
       width: auto;
       height: 92rpx;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .line {
       width: 8rpx;
       height: 20rpx;
       transition: 0.5s;
       border-radius: 4rpx;
       background-image: linear-gradient(#4EB1FF,#EDEEEF);
       margin: 0 5rpx;
       animation: equalize 0.8s infinite;
       animation-timing-function: linear;
   }

   .line-Reverse {
       animation: equalize2 0.8s infinite;
   }

   .line .animationNone {
       animation: none;
   }

   @keyframes equalize {
       0% {
           height: 92rpx;
       }

       25% {
           height: 45rpx;
       }

       50% {
           height: 0rpx;
       }

       75% {
           height: 45rpx;
       }

       100% {
           height: 92rpx;
       }
   }

   @keyframes equalize2 {
       0% {
           height: 0rpx;
       }

       25% {
           height: 45rpx;
       }

       50% {
           height: 92rpx;
       }

       75% {
           height: 50rpx;
       }

       100% {
           height: 60rpx;
       }
   }
   .startBox {
       // display: none;
       display: flex;
       justify-content: center;
       height: 96rpx;
       width: 334rpx;
       position: absolute;
       top: -538rpx;
   }