/* 适用于[[16bit的感动]]相关条目的css样式表 */
/* 链接排除图片 */
a:not(.image) {
position: relative;/* 辅助定位下划线 */
z-index: 3;/* 文本浮于上方 */
}
/* 链接悬停 */
a:not(.image):hover {
text-decoration: none;/* 去除默认下划线 */
animation: hover_text 0.3s ease-in-out forwards;/* 闪烁动画 */
}
/* 闪烁动画 */
@keyframes hover_text {
0%, 60%, 100% {
color: #000;
}
30%, 90% {
color: transparent;
}
}
/* 下划线移入 */
a:not(.image):before {
content: "";
position: absolute;
background: #ff66eb;
width: 0;
height: 0.4em;
right: 0;
bottom: 0;
z-index: -1;
opacity: 0.8;
transition: width 0.3s cubic-bezier(0.5, 1, 0.89, 1);
}
/* 下划线移出 */
a:not(.image):hover:before {
width: 100%;
right: auto;
left: 0;
}
/* 排除通知和页顶模板 */
span[id="topNotice-newAnnouncement"] a:before, span[data-top-notice-id="normal-discussion"] a:before, .scrollDiv a:before, .infoBox a:before {
content: none;
background: transparent;
}
span[id="topNotice-newAnnouncement"] a:hover, span[data-top-notice-id="normal-discussion"] a:hover, .scrollDiv a:hover, .infoBox a:hover {
animation: none;
text-decoration: underline;
background: transparent;
}
/* only for [[Template:16bit的感动]] */
.navbox a {
text-decoration: none;
transition: background 0.2s ease-out;
}
.navbox a:before {
content: none;
background: transparent;
}
.navbox a:hover {
background: #fae100;
animation: none;
}
.character {
display: inline-block;
text-align: center;
width: 90px;
margin: 0 5px;
}
.character a:first-child{
position: relative;
border-radius: 8px;
overflow: hidden;
display: inline-table;
}
.character a:first-child:before, .character a:first-child:after{
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
box-sizing: border-box;
opacity: 0;
}
.character a:first-child:before {
border-top: solid #fae100;
border-bottom: solid #00dce4;
border-width: 6px;
}
.character a:first-child:after {
border-left: solid #c21500;
border-right: solid #c21500;
border-image: linear-gradient(to bottom, #fae100 0%, #00dce4 100%);
border-image-slice: 1;
border-width: 6px;
}
.character a:first-child:hover:before, .character a:first-child:hover:after {
animation: hover_image 0.3s ease-in-out forwards;/* 闪烁动画 */
}
/* 闪烁动画 */
@keyframes hover_image {
0%, 60%, 100% {
opacity: 1;
}
30%, 90% {
opacity: 0;
}
}
/* [[Category:在模板名字空间下的CSS页面]] */