epmet-resi-rizhao/assets/scss/sound-record.scss

.sound-record {
	// position: absolute;
	// bottom: 0;
	width: 100%;
	height: 580rpx;
	background-color: #ffffff;

	.sound-cancle {
		padding: 20rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: right;
	}

	.sound-wrapper {
    margin-top: 80rpx;
		font-family: Source Han Serif SC;
		font-weight: 500;
		text-align: center;

		.sound-time {
      width: 80rpx;
      margin: 0 auto;
			font-size: 30rpx;
			color: #333333;
      line-height: 1;
      letter-spacing: 2rpx;
		}
		.sound-tips {
			font-size: 26rpx;
			color: #999999;
		}

		.sound-operate {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 40rpx 0 30rpx 0;
			.sound-operate-del,
			.sound-operate-finish {
				width: 60rpx;
				height: 60rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.sound-operate-btn {
        margin: 0 60rpx;
				.sound-circel {
					width: 160rpx;
          height: 160rpx;
          box-sizing: border-box;
					background: rgba(230, 0, 0, 0.13);
          border-radius: 50%;
          overflow: hidden;
          
          .sound-circle-bd {
            width: 124rpx;
            height: 124rpx;
            box-sizing: border-box;
            margin: 18rpx auto;
            border: 16rpx solid #E60000;
            overflow: hidden;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
          }
          .sound-circle-bg {
            background: #E60000;
          }
				}
			}
		}
	}
}

@-webkit-keyframes list {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }

  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@keyframes list {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }

  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }

  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
.sound-play {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

}
.sound-play .sound-play-item {
  background-color: rgba(255, 49, 49, 1);
  width: 10rpx;
  height: 40rpx;
  border-radius: 6rpx;
  margin-right: 6rpx;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation: list 1s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  -webkit-border-radius: 6rpx;
  -moz-border-radius: 6rpx;
  -ms-border-radius: 6rpx;
  -o-border-radius: 6rpx;
  -webkit-animation: list 1s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}
.sound-play .sound-play-item:nth-child(1) {
  -webkit-animation-delay: 0.1s !important;
  animation-delay: 0.1s !important;
}
.sound-play .sound-play-item:nth-child(2) {
  -webkit-animation-delay: 0.2s !important;
  animation-delay: 0.2s !important;
}
.sound-play .sound-play-item:nth-child(3) {
  -webkit-animation-delay: 0.3s !important;
  animation-delay: 0.3s !important;
}
.sound-play .sound-play-item:nth-child(4) {
  -webkit-animation-delay: 0.4s !important;
  animation-delay: 0.4s !important;
}
.sound-play-stop .sound-play-item {
  animation-play-state: paused;
}