2023年政策修订增补工作正在进行中,欢迎参与!
User:RabBIThole/sandbox/style.css
< User:RabBIThole | sandbox
注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- 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页面]] */