Template:16bit的感动/styles.css

/* 适用于[[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页面]] */