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

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

 

 

//模版部分
<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: 0px;}&:nth-child(1),&:nth-child(15) {animation: load 2.5s 1.4s infinite linear;}&:nth-child(2),&:nth-child(14) {animation: load 2.5s 1.2s infinite linear;}&:nth-child(3),&:nth-child(13) {animation: load 2.5s 1s infinite linear;}&:nth-child(4),&:nth-child(12) {animation: load 2.5s 0.8s infinite linear;}&:nth-child(5),&:nth-child(11) {animation: load 2.5s 0.6s infinite linear;}&:nth-child(6),&:nth-child(10) {animation: load 2.5s 0.4s infinite linear;}&:nth-child(7),&:nth-child(9) {animation: load 2.5s 0.2s infinite linear;}&:nth-child(8) {animation: load 2.5s 0s infinite linear;}@keyframes load {0% {height: 10%;}50% {height: 100%;}100% {height: 10%;}}}}}

在模板中，该区域具有 musical-scale 类，以设置其样式属性。在该区域内部，有一个 scale 类的容器，容器内部通过 v-for 遍历生成了15个 em 元素，每个 em 元素都会应用动画效果。通过 @keyframes 定义的 load 动画，控制了 em 元素的高度从10%到100%再到10%的变化过程，形成了录音的动画效果。

总结起来，这段代码实现了一个简单的录音动画效果，通过 CSS 的样式定义和动画关键帧的设置，使得一组垂直排列的短竖条在高度上呈现周期性的变化，形成了类似声音震动的效果。