Template:A-SOUL/style.css

.as-box { 
	position: relative;
	display: inline-block;
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.as-box::after { 
	content: "";
	position: absolute;
	z-index: -1; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	opacity: 0; 
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 
} 
.as-box:hover { 
	transform: scale(1.25, 1.25); 
	text-decoration: none
} 
.as-box:hover::after { 
	opacity: 1; 
}

.as-circle > .image-clip {
	border-radius: 50px;
	background: #fff;
}

.as-circle {
	max-width: 100px;
	max-height: 100px;
	border-radius: 50%;
}
.as-circle:after {
	content: '';
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.as-circle.Ava:hover:after { 
	animation: circle1 1.3s cubic-bezier(0.51, 0.78, 0.32, 1.34) 50ms
}

@keyframes circle1 {
	0% {
		opacity: 0.4;
		box-shadow: 0 0 0 1px #9AC8E2;
	}
	20% {
		opacity: 0.5;
		box-shadow: 0 0 6px 3px #9AC8E2; 
	}
	40% {
		opacity: 0.6;
		box-shadow: 0 0 12px 3px #9AC8E2; 
	}
	60% {
		box-shadow: 0 0 8px 5px #9AC8E2;
		transform: scale(1.15);
		opacity: 0.5;
	}
	100% {
		box-shadow: 0 0 10px 3px #9AC8E2;
		transform: scale(1.7);
		opacity: 0;
	}
}

.as-circle.Bella:hover:after { 
	animation: circle2 1.3s cubic-bezier(0.51, 0.78, 0.32, 1.34)50ms
}

@keyframes circle2 {
	0% {
		opacity: 0.4;
		box-shadow: 0 0 0 1px #DB7F74;
	}
	20% {
		opacity: 0.5;
		box-shadow: 0 0 6px 3px #DB7F74; 
	}
	40% {
		opacity: 0.6;
		box-shadow: 0 0 12px 3px #DB7F74; 
	}
	60% {
		box-shadow: 0 0 8px 5px #DB7F74;
		transform: scale(1.15);
		opacity: 0.5;
	}
	100% {
		box-shadow: 0 0 10px 3px #DB7F74;
		transform: scale(1.7);
		opacity: 0;
	}
}
.as-circle.Carol:hover:after { 
	animation: circle3 1.3s cubic-bezier(0.51, 0.78, 0.32, 1.34)50ms
}

@keyframes circle3 {
	0% {
		opacity: 0.4;
		box-shadow: 0 0 0 1px #B8A6D9;
	}
	20% {
		opacity: 0.5;
		box-shadow: 0 0 6px 3px #B8A6D9; 
	}
	40% {
		opacity: 0.6;
		box-shadow: 0 0 12px 3px #B8A6D9; 
	}
	60% {
		box-shadow: 0 0 8px 5px #B8A6D9;
		transform: scale(1.15);
		opacity: 0.5;
	}
	100% {
		box-shadow: 0 0 10px 3px #B8A6D9;
		transform: scale(1.7);
		opacity: 0;
	}
}
.as-circle.Diana:hover:after { 
	animation: circle4 1.3s cubic-bezier(0.51, 0.78, 0.32, 1.34) 50ms
}

@keyframes circle4 {
	0% {
		opacity: 0.4;
		box-shadow: 0 0 0 1px #E799B0;
	}
	20% {
		opacity: 0.5;
		box-shadow: 0 0 6px 3px #E799B0; 
	}
	40% {
		opacity: 0.6;
		box-shadow: 0 0 12px 3px #E799B0; 
	}
	60% {
		box-shadow: 0 0 8px 5px #E799B0;
		transform: scale(1.15);
		opacity: 0.5;
	}
	100% {
		box-shadow: 0 0 10px 3px #E799B0;
		transform: scale(1.7);
		opacity: 0;
	}
}
.as-circle.Eileen:hover:after { 
	animation: circle5 1.3s cubic-bezier(0.51, 0.78, 0.32, 1.34) 50ms
}

@keyframes circle5 {
	0% {
		opacity: 0.4;
		box-shadow: 0 0 0 1px #576690;
	}
	20% {
		opacity: 0.5;
		box-shadow: 0 0 6px 3px #576690; 
	}
	40% {
		opacity: 0.6;
		box-shadow: 0 0 12px 3px #576690; 
	}
	60% {
		box-shadow: 0 0 8px 5px #576690;
		transform: scale(1.15);
		opacity: 0.5;
	}
	100% {
		box-shadow: 0 0 10px 3px #576690;
		transform: scale(1.7);
		opacity: 0;
	}
}

/*mzh*/
@media (max-width: 576px) {
	.as-box {
		height: 4.5rem;
	}
	.as-box>div.image-clip {
		width: 4.5rem !important;
		height: 4.5rem !important;
	}
	.as-box img {
		width: 4.5rem !important;
	}
}

.navbox-list {
	line-height: 1.7 !important;
}

/* [[Category:在模板名字空间下的CSS页面]] */