You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.7 KiB
130 lines
2.7 KiB
2 years ago
|
.audio,
|
||
|
|
.audio-wrapper {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.audio {
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
}
|
||
|
|
.audio-wrapper {
|
||
|
|
width: 590rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
padding: 0 20rpx;
|
||
|
|
background: #ffffff;
|
||
|
|
box-shadow: 0rpx 3rpx 24rpx 0rpx rgba(211, 211, 211, 0.26);
|
||
|
|
border-radius: 20rpx;
|
||
|
|
-webkit-border-radius: 20rpx;
|
||
|
|
-moz-border-radius: 20rpx;
|
||
|
|
-ms-border-radius: 20rpx;
|
||
|
|
-o-border-radius: 20rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
display: block;
|
||
|
|
width: 56rpx;
|
||
|
|
height: 56rpx;
|
||
|
|
}
|
||
|
|
.audio-btn {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
border: 6rpx solid #333;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 50%;
|
||
|
|
-webkit-border-radius: 50%;
|
||
|
|
-moz-border-radius: 50%;
|
||
|
|
-ms-border-radius: 50%;
|
||
|
|
-o-border-radius: 50%;
|
||
|
|
}
|
||
|
|
.audio-slider {
|
||
|
|
width: 386rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.audio-time {
|
||
|
|
width: 70rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
font-family: Source Han Serif SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.audio-del {
|
||
|
|
image {
|
||
|
|
display: block;
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-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 {
|
||
|
|
width: 4rpx;
|
||
|
|
height: 20rpx;
|
||
|
|
border-radius: 6rpx;
|
||
|
|
margin-right: 2rpx;
|
||
|
|
background-color: #333;
|
||
|
|
-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;
|
||
|
|
}
|