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.
109 lines
2.5 KiB
109 lines
2.5 KiB
.record { |
|
width: 107rpx; |
|
height: 107rpx; |
|
border: 10rpx solid #e6f7f9; |
|
border-radius: 50%; |
|
.icon { |
|
width: 107rpx; |
|
height: 107rpx; |
|
} |
|
.record-page { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100vw; |
|
height: 100vh; |
|
z-index: 10000; |
|
background-color: rgba(0, 0, 0, 0); |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
.record-line { |
|
position: relative; |
|
padding: 32rpx; |
|
border-radius: 32rpx; |
|
background-color: rgba(1, 180, 197, 1); |
|
display: flex; |
|
align-items: center; |
|
.wave { |
|
width: 260rpx; |
|
height: 60rpx; |
|
} |
|
.time { |
|
font-size: 28rpx; |
|
color: rgba(255, 255, 255, 1); |
|
} |
|
&::after { |
|
position: absolute; |
|
left: calc(50% - 6rpx); |
|
bottom: -10rpx; |
|
content: ''; |
|
width: 0; |
|
height: 0; |
|
border-style: solid; |
|
border-width: 12rpx 12rpx 0 12rpx; |
|
border-color: rgba(1, 180, 197, 1) transparent transparent transparent; |
|
} |
|
} |
|
.record-page-icon-wrap { |
|
width: 320rpx; |
|
height: 320rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.record-page-icon { |
|
margin-top: 32rpx; |
|
width: 0; |
|
height: 0; |
|
padding: 0; |
|
// background-color: rgba(255, 255, 255, 0.5); |
|
// border: 0 solid rgba(255, 255, 255, 0.25); |
|
background: radial-gradient(circle, rgba(192, 192, 192, 1) 0%, rgba(133, 133, 133, 1) 100%); |
|
border-radius: 50%; |
|
transition: all 0.3s; |
|
} |
|
&.record-pape-start { |
|
opacity: 0; |
|
left: 0; |
|
top: 100vh; |
|
transition: all 0.3s; |
|
} |
|
&.record-page-active { |
|
left: 0; |
|
top: 0; |
|
opacity: 1; |
|
background-color: rgba(0, 0, 0, 0.7); |
|
.record-page-icon { |
|
width: 200rpx; |
|
height: 200rpx; |
|
padding: 56rpx; |
|
// border: 28rpx solid rgba(255, 255, 255, 0.25); |
|
border-radius: 50%; |
|
animation: grow-bp 0.6s ease-in-out 0.3s infinite; |
|
@keyframes grow-bp { |
|
0% { |
|
padding: 0; |
|
// border-width: 0; |
|
} |
|
// 25% { |
|
// padding: 28rpx; |
|
// } |
|
50% { |
|
padding: 56rpx; |
|
// border-width: 28rpx; |
|
} |
|
// 75% { |
|
// padding: 28rpx; |
|
// border-width: 0; |
|
// } |
|
100% { |
|
padding: 0; |
|
// border-width: 0; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
}
|
|
|