先来上图
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*/
}
}