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.
150 lines
2.0 KiB
150 lines
2.0 KiB
@import '../c/conf';
|
|
@keyframes disk_shake {
|
|
0%,
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
25% {
|
|
transform: rotate(15deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(-15deg);
|
|
}
|
|
|
|
75% {
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
85% {
|
|
transform: rotate(-5deg);
|
|
}
|
|
}
|
|
@keyframes disk_ripple {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
40% {
|
|
opacity: 0;
|
|
transform: scale(1.4);
|
|
}
|
|
|
|
40.1% {
|
|
opacity: 0.3;
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes disk_rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.m-disk {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 540rpx;
|
|
height: 540rpx;
|
|
border: 10rpx solid #f0eff4;
|
|
background-color: #fff;
|
|
border-radius: 100%;
|
|
|
|
.disk-btn,
|
|
.disk-btn image,
|
|
.disk-image,
|
|
.disk-masking,
|
|
.disk-ripple,
|
|
.disk-ripple2,
|
|
.m-circle-progress {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.m-circle-progress {
|
|
margin: 0;
|
|
top: 50%;
|
|
left: 50%;
|
|
bottom: auto;
|
|
right: auto;
|
|
}
|
|
|
|
.disk-image,
|
|
.disk-masking {
|
|
width: 480rpx;
|
|
height: 480rpx;
|
|
}
|
|
|
|
.disk-image {
|
|
&.z-play {
|
|
animation: disk_rotate 60s infinite;
|
|
}
|
|
}
|
|
|
|
.disk-masking {
|
|
background-color: rgba(#000, 0.4);
|
|
}
|
|
|
|
.disk-ripple,
|
|
.disk-ripple2 {
|
|
background-color: rgba($c1, 0.3);
|
|
}
|
|
|
|
.disk-ripple {
|
|
width: 240rpx;
|
|
height: 240rpx;
|
|
|
|
&.z-on {
|
|
animation: disk_ripple 1s infinite;
|
|
}
|
|
}
|
|
|
|
.disk-ripple2 {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
}
|
|
|
|
.disk-btn {
|
|
box-sizing: border-box;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
background-color: $c1;
|
|
transition: background-color 0.13s;
|
|
|
|
&:active {
|
|
background-color: darken($c1, 5);
|
|
animation: disk_shake 0.3s alternate;
|
|
}
|
|
|
|
image {
|
|
display: block;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: none;
|
|
}
|
|
}
|
|
|
|
.disk-btn-del {
|
|
position: absolute;
|
|
top: 90rpx;
|
|
right: -56rpx;
|
|
width: 80rpx;
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
|