epmet-resi-rizhao/assets/scss/m/disk.scss

@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;
	}
}