通过 CSS 的样式实现语音发送动效类似声音震动的效果

最新推荐文章于 2025-07-17 12:33:13 发布

原创

最新推荐文章于 2025-07-17 12:33:13 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

实现效果：一般用于发送语音的时候，出现动画效果

//模版部分
<view  class="musical-scale">
		  <view class="scale">
		    <view class="em" v-for="(item,index) in 15" :key="index"></view>
		  </view>
</view>


//css样式+动画
.musical-scale {
	  position: absolute;
	  bottom: 50%;
	  width: 80%;
	  height: 96rpx;
	  background-color: #E2F0FF;
	  border-radius: 48rpx;
	  z-index: 1;
	  text-align: center;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	
	  .scale {
	    width: 65%;
	    height: 56rpx;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	
	    .em {
	      display: block;
	      background: #007AFF;
	      width: 4rpx;
	      height: 10%;
	      float: left;
	
	      &:last-child {
	        margin-right: