fny-ugd-palace-uniapp/pages/signs/home/index.scss

.sign-page{
	height: 100vh;
	overflow: hidden;
	background-color: #fff;
	position: relative;
	font-size: 0;
	
	.inner-img{
		width: auto;
		height: auto;
	}
	.page-bg{
		height: 100vh;
		width: 100vw;
		.inner-img{
			width: 100%;
		}
	}
	.page-head{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100vw;
		
		.inner-img{
			width: 100%;
		}
	}
	
	.page-btn{
		position: absolute;
		background: transparent;
		top: 50%;
		left: 50%;
		width: 426rpx;
		height: 426rpx;
		margin-top: -213rpx;
		margin-left: -213rpx;
		z-index: 10;
		.inner{
			position: relative;
			width: 100%;
			height: 100%;
		}
		.inner-img{
			position: relative;
			width: 100%;
			height: 100%;
		}
		.circle-round{
			position: absolute;
			border-radius: 50%;
			pointer-events: none;
			&.border-1{
				top: 40rpx;
				left: 40rpx;
				right: 40rpx;
				bottom: 40rpx;
				border-top: 2px solid rgba(255,255,255,.7);
				filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #fff) drop-shadow(0 0 10px #fff);
				animation: turn2 5s linear infinite;
				transform-origin: 50% 50%;
				animation-delay: 0.2s;
			}
			
			&.border-2{
				top: 60rpx;
				left: 60rpx;
				right: 60rpx;
				bottom: 60rpx;
				border-left: 2px solid rgba(255,255,255,.6);
				filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff);
				animation: turn 3s linear infinite;
				transform-origin: 50% 50%;
				// animation-delay: 0.3s;
			}
		}
		&.button-hover{
			.inner{
				top: 4px;
			}
		}
	}
	
	 
	@keyframes turn {
		100% {
			transform: rotateZ(-1turn);
		}
	}
	@keyframes turn2 {
		100% {
			transform: rotateZ(1turn);
		}
	}
	@keyframes rotate {
		100% {
			border: none;
			border-top: 2px solid #fff;
			border-bottom: 2px solid #fff;
			transform: translate(-50%, -50%) rotate3d(.5, 0.5, 0.5, -720deg);
		}
	}
}