2023年政策修订增补工作正在进行中,欢迎参与!
  • Moegirl.ICU:萌娘百科流亡社群 581077156(QQ),欢迎对萌娘百科运营感到失望的编辑者加入
  • Moegirl.ICU:账号认领正在试运行,有意者请参照账号认领流程

User:RabBIThole/sandbox/style.css

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳转到导航 跳转到搜索

注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。

  • Firefox/Safari:按住“Shift”的同时单击“刷新”,或按“Ctrl-F5”或“Ctrl-R”(Mac为“⌘-R”)
  • Google Chrome:按“Ctrl-Shift-R”(Mac为“⌘-Shift-R”)
  • Internet Explorer:按住“Ctrl”的同时单击“刷新”,或按“Ctrl-F5”
  • Opera:在“工具→首选项”中清除缓存
如果您已登录但该页面出现未登录状态,请尝试在地址栏的地址最后添加代码?_=1来访问最新页面。
添加代码后的本页地址如下:-{R|https://moegirl.icu/User:RabBIThole/sandbox/style.css?_=1}-
.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; 
}

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

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

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

.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;
	}
}
.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;
	}
}
.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;
	}
}
.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>div.image-clip {
		width: 4.5rem !important;
		height: 4.5rem !important;
	}
	.as-box img {
		width: 4.5rem;
	}
}

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

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