前端代码 录音样式 类似微信发送语音

先来上图

wxml代码 不是小程序的就换成div

<view class="voice" wx:if="{{voiceshow }}">
	<view class="bgc"></view>
	<view class="acoustic reception">
		<view class="five"></view>
		<view class="four"></view>
		<view class="three"></view>
		<view class="two"></view>
		<view class="one"></view>
	</view>

	<view class="change">
		<view class="cancel {{btnclose?'select':''}}">
			<view wx:if="{{btnclose}}" class="release">松开 取消</view>
			<image wx:if="{{btnclose}}" bindtap="complainShow" src="{{libUrl + '/images/wechat-img/关  闭 @2x.png'}}"></image>
			<image wx:else bindtap="complainShow" src="{{libUrl + '/images/wechat-img/关闭@12x.png'}}"></image>
		</view>
		<view class="word {{btnword?'select':''}}">
			<view wx:if="{{btnword}}"  class="release">转文字</view>
			<text>文</text>
		</view>
	</view>

	<view id="bottom-top" class="bottom_top {{move_top?'bottom_hover':''}}">
		<view wx:if="{{move_top}}" class="release">松开 发送</view>
		<view class="symbols">
			<view class="wifi-symbol dong ">
				<view class="wifi-circle first"></view>
				<view class="wifi-circle second"></view>
				<view class="wifi-circle third"></view>
			</view>
		</view>
	</view>
</view>

css的代码 这个样式变化在js中调节 获取整个窗口的高度 减去底下动画框到顶部的高度 就是上半边的高度 然后判断移动的位置 在那个上面 是发送语音还是不发送语音 然后再去判断在左右那两边 再去判断是取消还是转换文字 这些样式都是动态的 需要在js 中进行编辑添加 有什么不懂得私信我

.voice {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  overflow: hidden;
}

.voice .bgc {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .6);

}

.voice .bottom_top {
  width: 120%;
  height: 380rpx;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(58, 58, 58);
  bottom: -120rpx;
}

.voice .bottom_hover {
  background: linear-gradient(0deg, rgb(213, 213, 213) 50%, rgb(163, 163, 163) 100%);
  border: 10rpx solid rgb(182, 181, 181);
  box-sizing: border-box;
}

.voice .bottom_top .symbols {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.voice .change .cancel .release {
  /* width: 220rpx; */
  /* transform: rotate(15deg); */
}

.voice .change .word .release {
  /* width: 80rpx; */
  /* transform: rotate(-15deg); */
}

.release {
  width: 100%;
  text-align: center;
  height: 30rpx;
  line-height: 30rpx;
  font-size: 28rpx;
  position: absolute;
  top: -60rpx;
  left: 0;
  color: rgb(170, 170, 170) !important;
}

.voice .change {
  width: 100%;
  height: 180rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 300rpx;
}

.voice .change .cancel,
.voice .change .word {
  position: relative;
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  background-color: rgb(58, 58, 58);
  text-align: center;
  line-height: 150rpx;
  color: rgb(135, 135, 135);
  font-size: 36rpx;
  /* border: 15rpx solid rgba(58, 58, 58,0) ; */
}

.voice .change .cancel {
  margin-left: 80rpx;
  
}

.voice .change .cancel image {
  width: 30rpx;
  height: 30rpx;
  transform: rotate(-15deg);
}

.voice .change .word {
  margin-right: 80rpx;
  
}
.voice .change .word text{
  display: block;
transform: rotate(15deg);
}
.voice .change .select {
  background-color: rgb(237, 237, 237);
  border: 15rpx solid rgb(237, 237, 237);
  color: rgb(48, 48, 48);
}

.voice .acoustic {
  width: 200rpx;
  height: 220rpx;
  background-color: rgb(48, 48, 48);
  border-radius: 20rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding-left: 60rpx;
  padding-top: 30rpx;
  box-sizing: border-box;
}

.voice .acoustic view {
  background-color: #ccc;
  height: 16rpx;
  margin-top: 15rpx;
}

.voice .acoustic .one {
  width: 30rpx;
}

.voice .acoustic .two {
  width: 45rpx;
}

.voice .acoustic .three {
  width: 65rpx;

}

.voice .acoustic .four {
  width: 80rpx;
}

.voice .acoustic .five {
  width: 95rpx;
}

.voice .acoustic .active {
  background-color: rgb(139, 195, 74);
}

.reception .one {
  animation: fadeInOut1 .7s infinite 0.1s;
}

.reception .two {
  animation: fadeInOut1 .7s infinite 0.2s;
}

.reception .three {
  animation: fadeInOut1 .7s infinite 0.3s;
}

.reception .four {
  animation: fadeInOut1 .7s infinite 0.4s;
}

.reception .five {
  animation: fadeInOut1 .7s infinite 0.5s;
}

@keyframes fadeInOut1 {
  0% {
    opacity: 0;
    /*初始状态 透明度为0*/
    /* background-color: rgb(139, 195, 74); */
  }

  100% {
    opacity: 1;
    /*结尾状态 透明度为1*/
    background-color: #ccc;
  }
}

/* 录音动画 */

.box {
  width: 90rpx;
  box-sizing: border-box;
  position: relative;
  margin: 0rpx 20rpx;
  line-height: 50rpx;
  display: flex;
  justify-content: space-between;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

.wifi-symbol {
  width: 50rpx;
  height: 50rpx;
  box-sizing: border-box;
  overflow: hidden;
  transform: rotate(135deg);
  /* background-color: red; */
  position: relative;
}

.wifi-circle {
  border: 5rpx solid #999999;
  border-radius: 50%;
  position: absolute;
}

.first {
  width: 5rpx;
  height: 5rpx;
  background: #cccccc;
  top: 45rpx;
  left: 45rpx;
}

.dong .second {
  animation: fadeInOut 1s infinite 0.2s;
}

.second {
  width: 25rpx;
  height: 25rpx;
  top: 35rpx;
  left: 35rpx;
}

.dong .third {
  animation: fadeInOut 1s infinite 0.4s;
}

.third {
  width: 40rpx;
  height: 40rpx;
  top: 25rpx;
  left: 25rpx;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    /*初始状态 透明度为0*/
  }

  100% {
    opacity: 1;
    /*结尾状态 透明度为1*/
  }
}