模板:Hovers/hover.css

#ts_to_css {
	display: none;
}
/*
	该文档为一个hover特效库，由一些常用的效果以及GitHub上的开源项目“Hover.css”的一些部分构成。
	请使用模板:hovers在页面中进行载入。
*/

/* hover状态切换 */
.hover-change,
.hover-remote {
	position: relative;
	display: inline-block;
	transition: opacity 0.5s linear;
}

.hover-change-before,
.hover-change-after,
.hover-remote-target {
	transition: inherit;
}

.hover-change-after,
.hover-remote-target {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}
.hover-remote-target {
	left: 100%;
}

.hover-change-after[style^='right:'],
.hover-change-after[style*=' right:'],
.hover-remote-after[style^='right:'],
.hover-remote-after[style*=' right:'] {
	left: initial;
}

.hover-change-after[style^='bottom:'],
.hover-change-after[style*=' bottom:'],
.hover-remote-after[style^='bottom:'],
.hover-remote-after[style*=' bottom:'] {
	top: initial;
}

.hover-change-after:hover,
.hover-remote-target {
	opacity: 0;
	margin-left: -9999px;
}

/* 主要用于制作hover形式的标签页(tab)切换 */
.hover-tab-mode {
	position: relative;
	transition: none;
}
.hover-tab-mode .hover-remote {
	transition: inherit;
	position: static;
}

/* 闪烁效果 */
.hover-change.flash:hover .hover-change-before {
	margin-left: -9999px;
}

.hover-change:hover > .hover-change-before,
.hover-remote > .hover-remote-target,
.hover-change:hover > a > .hover-change-before,
.hover-remote > a > .hover-remote-target {
	opacity: 0;
}

.hover-change:hover > .hover-change-after,
.hover-remote:hover > .hover-remote-target,
.hover-change:hover > a > .hover-change-after,
.hover-remote:hover > a > .hover-remote-target {
	opacity: 1;
	margin-left: initial;
}

/* 基类 */
[class*='hovers-'] {
	display: inline-block;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	transform: perspective(1px) translateZ(0);
	vertical-align: middle;
	transition-duration: 0.25s;
	transition-property: all;
}

/* 旋转放大 */
.hovers-rotate-shrink {
	transition-duration: 0.5s;
	transform: rotate(0) scale(0.75);
}
.hovers-rotate-shrink:hover {
	transform: rotate(360deg) scale(1);
}

.hovers-rotate-shrink-reverse {
	transition-duration: 0.5s;
	transform: rotate(360deg) scale(0.75);
}

.hovers-rotate-shrink-reverse:hover {
	transform: rotate(0) scale(1);
}

/* 旋转 */
.hovers-rotate,
.hovers-rotate-reverse:hover {
	transition-duration: 0.5s;
	transform: rotate(0);
}

.hovers-rotate-reverse,
.hovers-rotate:hover {
	transition-duration: 0.5s;
	transform: rotate(360deg);
}

/* 正常 => 浅 */
.hovers-fade-deep,
.hovers-fade,
.hovers-fade-shallow {
	opacity: 1;
}
.hovers-fade-deep:hover,
.hovers-fade-deep.active {
	opacity: 0.35;
}
.hovers-fade:hover,
.hovers-fade.active {
	opacity: 0.5;
}
.hovers-fade-shallow:hover,
.hovers-fade-shallow.active {
	opacity: 0.75;
}

/* 浅 => 正常 */
.hovers-bloom-deep {
	opacity: 0.35;
}
.hovers-bloom {
	opacity: 0.5;
}
.hovers-bloom-shallow {
	opacity: 0.75;
}

.hovers-bloom-deep:hover,
.hovers-bloom-deep.active,
.hovers-bloom:hover,
.hovers-bloom.active,
.hovers-bloom-shallow:hover,
.hovers-bloom-shallow.active {
	opacity: 1;
}

/* 正常 => 大 */
.hovers-grow-deep,
.hovers-grow,
.hovers-grow-shallow {
	transform: scale(1);
}
.hovers-grow-deep:hover,
.hovers-grow-deep.active {
	transform: scale(1.5);
}
.hovers-grow:hover,
.hovers-grow.active {
	transform: scale(1.25);
}
.hovers-grow-shallow:hover,
.hovers-grow-shallow.active {
	transform: scale(1.1);
}

/* 正常 => 小 */
.hovers-shrink-deep:hover,
.hovers-shrink-deep.active,
.hovers-shrink:hover,
.hovers-shrink.active,
.hovers-shrink-shallow:hover,
.hovers-shrink-shallow.active {
	transform: scale(1);
}
.hovers-shrink-deep {
	transform: scale(0.5);
}
.hovers-shrink {
	transform: scale(0.75);
}
.hovers-shrink-shallow {
	transform: scale(0.9);
}

/* 左右抖动 */
@keyframes shake-flexible {
	25% {
		transform: translateX(-0.0625em);
	}

	50% {
		transform: translateX(0.0625em);
	}

	75% {
		transform: translateX(-0.0625em);
	}
}

.hovers-shake-flexible:hover,
.hovers-shake-flexible.active {
	animation: shake-flexible 0.5s ease-out;
}

@keyframes shake {
	25% {
		transform: translateX(-8px);
	}

	50% {
		transform: translateX(8px);
	}

	75% {
		transform: translateX(-8px);
	}
}

.hovers-shake:hover,
.hovers-shake.active {
	animation: shake 0.5s ease-out;
}

/* 上下抖动 */
@keyframes bounce-flexible {
	25% {
		transform: translateY(-0.0625em);
	}

	50% {
		transform: translateY(0.0625em);
	}

	75% {
		transform: translateY(-0.0625em);
	}
}

.hovers-bounce-flexible:hover,
.hovers-bounce-flexible.active {
	animation: bounce-flexible 0.5s ease-out;
}

@keyframes bounce {
	25% {
		transform: translateY(-8px);
	}

	50% {
		transform: translateY(8px);
	}

	75% {
		transform: translateY(-8px);
	}
}

.hovers-bounce:hover,
.hovers-bounce.active {
	position: relative;
	left: 0;
	animation: bounce 0.5s ease-out;
}

/* 绕顶端中点抖动 */
@keyframes swing {
	20% {
		transform: rotate3d(0, 0, 1, 10deg);
	}

	40% {
		transform: rotate3d(0, 0, 1, -10deg);
	}

	60% {
		transform: rotate3d(0, 0, 1, 5deg);
	}

	80% {
		transform: rotate3d(0, 0, 1, -5deg);
	}

	to {
		transform: rotate3d(0, 0, 1, 0deg);
	}
}

.hovers-swing {
	transform-origin: top center;
}
.hovers-swing:hover,
.hovers-swing.active {
	animation: swing 0.75s ease-out;
}

/* 正常 => 大 */
@keyframes pulse-grow {
	to {
		transform: scale(1.1);
	}
}

.hovers-pulse-grow:hover,
.hovers-pulse-grow.active {
	animation: pulse-grow 0.5s linear infinite alternate;
}

/* 正常 => 小 */
@keyframes pulse-shrink {
	to {
		transform: scale(0.9);
	}
}

.hovers-pulse-shrink:hover,
.hovers-pulse-shrink.active {
	animation: pulse-shrink 0.5s linear infinite alternate;
}

/* 正常 => 小 */
@keyframes push {
	50% {
		transform: scale(0.8);
	}
}

.hovers-push:hover,
.hovers-push.active {
	animation: push 0.3s linear;
}

/* 正常 => 大 */
@keyframes pop {
	50% {
		transform: scale(1.2);
	}
}

.hovers-pop:hover,
.hovers-pop.active {
	animation: pop 0.3s linear;
}

/* 正常 => 大 => 正常 => 大 */
.hovers-bounce-in:hover,
.hovers-bounce-in.active {
	transform: scale(1.2);
	transition-duration: 0.5s;
	transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* 正常 => 小 => 正常 => 小 */
.hovers-bounce-out:hover,
.hovers-bounce-out.active {
	transform: scale(0.8);
	transition-duration: 0.5s;
	transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* 倾斜 */
.hovers-tilt:hover,
.hovers-tilt.active {
	transition-duration: 0.3s;
	transform: rotate(4deg);
}

/* 倾斜 + 放大 */
.hovers-grow-rotate:hover,
.hovers-grow-rotate.active {
	transition-duration: 0.3s;
	transform: scale(1.1) rotate(4deg);
}

/* 升起 */
.hovers-float:hover,
.hovers-float.active {
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	transform: translateY(-8px);
}

/* 下沉 */
.hovers-sink:hover,
.hovers-sink.active {
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	transform: translateY(8px);
}

/* 飘浮 */
@keyframes bob {
	0% {
		transform: translateY(-10px);
	}
	50% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(-10px);
	}
}
@keyframes bob-float {
	100% {
		transform: translateY(-10px);
	}
}

.hovers-bob:hover,
.hovers-bob.active {
	animation-name: bob-float, bob;
	animation-duration: 0.3s, 1.5s;
	animation-delay: 0s, 0.3s;
	animation-timing-function: ease-out, ease-in-out;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards;
	animation-direction: normal, alternate;
}

/* 悬挂 */
@keyframes hang {
	0% {
		transform: translateY(10px);
	}
	50% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(10px);
	}
}
@keyframes hang-sink {
	100% {
		transform: translateY(10px);
	}
}

.hovers-hang:hover,
.hovers-hang.active {
	animation-name: hang-sink, hang;
	animation-duration: 0.3s, 1.5s;
	animation-delay: 0s, 0.3s;
	animation-timing-function: ease-out, ease-in-out;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards;
	animation-direction: normal, alternate;
}

/* 非对称 */
.hovers-skew:hover,
.hovers-skew.active {
	transform: skew(-10deg);
}

/* 非对称-左 */
.hovers-skew-forward {
	transform-origin: 0 100%;
}
.hovers-skew-forward:hover,
.hovers-skew-forward.active {
	transform: skew(-10deg);
}

/* 非对称-右 */
.hovers-skew-backward {
	transform-origin: 0 100%;
}
.hovers-skew-backward:hover,
.hovers-skew-backward.active {
	transform: skew(10deg);
}

/* 垂直抖动 */
@keyframes wobble-vertical {
	16.65% {
		transform: translateY(8px);
	}
	33.3% {
		transform: translateY(-6px);
	}
	49.95% {
		transform: translateY(4px);
	}
	66.6% {
		transform: translateY(-2px);
	}
	83.25% {
		transform: translateY(1px);
	}
	100% {
		transform: translateY(0);
	}
}

.hovers-wobble-vertical:hover,
.hovers-wobble-vertical.active {
	animation-name: wobble-vertical;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

/* 水平抖动 */
@keyframes wobble-horizontal {
	16.65% {
		transform: translateX(8px);
	}
	33.3% {
		transform: translateX(-6px);
	}
	49.95% {
		transform: translateX(4px);
	}
	66.6% {
		transform: translateX(-2px);
	}
	83.25% {
		transform: translateX(1px);
	}
	100% {
		transform: translateX(0);
	}
}
.hovers-wobble-horizontal:hover,
.hovers-wobble-horizontal.active {
	animation-name: wobble-horizontal;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

/* 右下弹回 */
@keyframes wobble-to-bottom-right {
	16.65% {
		transform: translate(8px, 8px);
	}
	33.3% {
		transform: translate(-6px, -6px);
	}
	49.95% {
		transform: translate(4px, 4px);
	}
	66.6% {
		transform: translate(-2px, -2px);
	}
	83.25% {
		transform: translate(1px, 1px);
	}
	100% {
		transform: translate(0, 0);
	}
}

.hovers-wobble-to-bottom-right:hover, 
.hovers-wobble-to-bottom-right.active {
	animation-name: wobble-to-bottom-right;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

/* 右上弹回 */
@keyframes wobble-to-top-right {
	16.65% {
		transform: translate(8px, -8px)
	}
	33.3% {
		transform: translate(-6px, 6px);
	}
	49.95% {
		transform: translate(4px, -4px);
	}
	66.6% {
		transform: translate(-2px, 2px);
	}
	83.25% {
		transform: translate(1px, -1px);
	}
	100% {
		transform: translate(0);
	}
}

.hovers-wobble-to-top-right:hover,
.hovers-wobble-to-top-right.active {
	animation-name: wobble-to-top-right;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

/* 果冻 */
@keyframes wobble-top {
	16.65% {
		transform: skew(-12deg);
	}
	33.3% {
		transform: skew(10deg);
	}
	49.95% {
		transform: skew(-6deg);
	}
	66.6% {
		transform: skew(4deg);
	}
	83.25% {
		transform: skew(-2deg);
	}
	100% {
		transform: skew(0);
	}
}

/* 赘肉 */
.hovers-wobble-top {
	transform-origin: 0 100%;
}
.hovers-wobble-top:hover,
.hovers-wobble-top.active {
	animation-name: wobble-top;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

@keyframes wobble-bottom {
	16.65% {
		transform: skew(-12deg);
	}
	33.3% {
		transform: skew(10deg);
	}
	49.95% {
		transform: skew(-6deg);
	}
	66.6% {
		transform: skew(4deg);
	}
	83.25% {
		transform: skew(-2deg);
	}
	100% {
		transform: skew(0);
	}
}

.hovers-wobble-bottom {
	transform-origin: 100% 0;
}
.hovers-wobble-bottom:hover,
.hovers-wobble-bottom.active {
	animation-name: wobble-bottom;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

/* 颤动 */
@keyframes wobble-skew {
	16.65% {
		transform: skew(-12deg);
	}
	33.3% {
		transform: skew(10deg);
	}
	49.95% {
		transform: skew(-6deg);
	}
	66.6% {
		transform: skew(4deg);
	}
	83.25% {
		transform: skew(-2deg);
	}
	100% {
		transform: skew(0);
	}
}
.hovers-wobble-skew:hover,
.hovers-wobble-skew.active {
	animation-name: wobble-skew;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

/* 振动 */
@keyframes buzz {
	50% {
		transform: translateX(3px) rotate(2deg);
	}
	100% {
		transform: translateX(-3px) rotate(-2deg);
	}
}

.hovers-buzz:hover,
.hovers-buzz.active {
	animation-name: buzz;
	animation-duration: 0.15s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* 振出 */
@keyframes buzz-out {
	10% {
		transform: translateX(3px) rotate(2deg);
	}
	20% {
		transform: translateX(-3px) rotate(-2deg);
	}
	30% {
		transform: translateX(3px) rotate(2deg);
	}
	40% {
		transform: translateX(-3px) rotate(-2deg);
	}
	50% {
		transform: translateX(2px) rotate(1deg);
	}
	60% {
		transform: translateX(-2px) rotate(-1deg);
	}
	70% {
		transform: translateX(2px) rotate(1deg);
	}
	80% {
		transform: translateX(-2px) rotate(-1deg);
	}
	90% {
		transform: translateX(1px) rotate(0);
	}
	100% {
		transform: translateX(-1px) rotate(0);
	}
}

.hovers-buzz-out:hover,
.hovers-buzz-out.active {
	animation-name: buzz-out;
	animation-duration: 0.75s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

/* 右移 */
.hovers-forward:hover,
.hovers-forward.active {
	transform: translateX(8px);
}

/* 左移 */
.hovers-backward:hover,
.hovers-backward.active {
	transform: translateX(-8px);
}

/* 自由移动 */
.hovers-top,
.hovers-left,
.hovers-bottom,
.hovers-right {
	transition: all 0.5s;
}

.hovers-top:hover,
.hovers-top.active {
	transform: translateY(-0.0625em);
}

.hovers-left:hover,
.hovers-left.active {
	transform: translateX(-0.0625em);
}

.hovers-bottom:hover,
.hovers-bottom.active {
	transform: translateY(0.0625em);
}

.hovers-right:hover,
.hovers-right.active {
	transform: translateX(0.0625em);
}

/* 滤镜 */
/* .hovers-blur,
.hovers-blur-reverse,
.hovers-brightness,
.hovers-brightness-reverse,
.hovers-contrast,
.hovers-contrast-reverse,
.hovers-grayscale,
.hovers-grayscale-reverse,
.hovers-invert,
.hovers-invert-reverse,
.hovers-saturate,
.hovers-saturate-reverse,
.hovers-sepia,
.hovers-sepia-reverse,
.hovers-hue-rotate,
.hovers-hue-rotate-reverse {
	transition-duration: 0.75s;
}

.hovers-blur:hover,
.hovers-blur.active,
.hovers-brightness:hover,
.hovers-brightness.active,
.hovers-contrast:hover,
.hovers-contrast.active,
.hovers-grayscale:hover,
.hovers-grayscale.active,
.hovers-invert:hover,
.hovers-invert.active,
.hovers-saturate:hover,
.hovers-saturate.active,
.hovers-sepia:hover,
.hovers-sepia.active,
.hovers-hue-rotate:hover,
.hovers-hue-rotate.active {
	filter: initial;
}

.hovers-blur {
	filter: blur(5px);
}

.hovers-blur-reverse:hover,
.hovers-blur-reverse.active {
	filter: blur(5px);
}

.hovers-brightness {
	filter: brightness(50%);
}

.hovers-brightness-reverse:hover,
.hovers-brightness-reverse.active {
	filter: brightness(50%);
}

.hovers-contrast {
	filter: contrast(50%);
}

.hovers-contrast-reverse:hover,
.hovers-contrast-reverse.active {
	filter: contrast(50%);
}

.hovers-grayscale {
	filter: grayscale(100%);
}

.hovers-grayscale-reverse:hover, 
.hovers-grayscale-reverse.active {
	filter: grayscale(100%);
}

.hovers-invert {
	filter: invert(100%);
}

.hovers-invert-reverse:hover,
.hovers-invert-reverse.active {
	filter: invert(100%);
}

.hovers-saturate {
	filter: saturate(200%);
}

.hovers-saturate-reverse:hover,
.hovers-saturate-reverse.active {
	filter: saturate(200%);
}

.hovers-sepia {
	filter: sepia(100%);
}

.hovers-sepia-reverse:hover,
.hovers-sepia-reverse.acitve {
	filter: sepia(100%);
}

.hovers-hue-rotate {
	filter: hue-rotate(180deg);
}

.hovers-hue-rotate-reverse:hover,
.hovers-hue-rotate-reverse.active {
	filter: hue-rotate(180deg);
} */

/* 背景滑动 */
.hovers-sweep-to-right,
.hovers-sweep-to-left,
.hovers-sweep-to-bottom,
.hovers-sweep-to-top,
.hovers-radial-out,
.hovers-radial-in {
	position: relative;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	overflow: hidden;
}

.hovers-sweep-to-right:before,
.hovers-sweep-to-left:before,
.hovers-sweep-to-bottom:before,
.hovers-sweep-to-top:before,
.hovers-radial-out:before,
.hovers-radial-in:before {
	content: '';
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: inherit;
	transform: scaleX(0);
	transition: inherit;
}
.hovers-sweep-to-bottom:before,
.hovers-sweep-to-top:before {
	transform: scaleY(0);
}
.hovers-radial-out:before,
.hovers-radial-in:before {
	border-radius: 50%;
	transform: scale(0);
}
.hovers-radial-in:before {
	transform: scale(2);
}

.hovers-sweep-to-right:before {
	transform-origin: 0 50%;
}
.hovers-sweep-to-left:before {
	transform-origin: 100% 50%;
}
.hovers-sweep-to-bottom:before {
	transform-origin: 50% 0;
}
.hovers-sweep-to-top:before {
	transform-origin: 50% 100%;
}
.hovers-radial-out:hover:before,
.hovers-radial-out.active:before {
	transform: scale(2);
}
.hovers-radial-in:hover:before,
.hovers-radial-in.active:before {
	transform: scale(0);
}

.hovers-sweep-to-right .hovers-content.center,
.hovers-sweep-to-left .hovers-content.center,
.hovers-sweep-to-bottom .hovers-content.center,
.hovers-sweep-to-top .hovers-content.center,
.hovers-radial-out .hovers-content.center,
.hovers-radial-in .hovers-content.center {
	display: flex;
	align-items: center;
	justify-content: center;
	word-break: break-all;
}

.hovers-sweep-to-right:hover:before,
.hovers-sweep-to-left:hover:before,
.hovers-sweep-to-bottom:hover:before,
.hovers-sweep-to-top:hover:before,
.hovers-sweep-to-right.active:before,
.hovers-sweep-to-left:hover:before,
.hovers-sweep-to-bottom:hover:before,
.hovers-sweep-to-top:hover:before {
	transform: scaleX(1);
}

.hovers-sweep-to-right .hovers-content,
.hovers-sweep-to-left .hovers-content,
.hovers-sweep-to-bottom .hovers-content,
.hovers-sweep-to-top .hovers-content,
.hovers-radial-out .hovers-content,
.hovers-radial-in .hovers-content {
	width: 100%;
	height: 100%;
	position: absolute;
	transition-property: all;
	transition-duration: inherit;
	top: 0;
	left: 0;
	z-index: 11;
}

.hovers-sweep-to-right .hovers-content {
	left: initial;
	right: 100%;
}
.hovers-sweep-to-right:hover .hovers-content,
.hovers-sweep-to-right.active .hovers-content {
	right: 0;
}

.hovers-sweep-to-left .hovers-content {
	left: 100%;
}
.hovers-sweep-to-left:hover .hovers-content,
.hovers-sweep-to-left.active .hovers-content {
	left: 0;
}

.hovers-sweep-to-bottom .hovers-content {
	top: initial;
	bottom: 100%;
}
.hovers-sweep-to-bottom:hover .hovers-content,
.hovers-sweep-to-bottom.active .hovers-content {
	bottom: 0;
}

.hovers-sweep-to-top .hovers-content {
	top: 100%;
}
.hovers-sweep-to-top:hover .hovers-content,
.hovers-sweep-to-top.active .hovers-content {
	top: 0;
}

.hovers-radial-out .hovers-content,
.hovers-radial-in:hover .hovers-content,
.hovers-radial-in.active .hovers-content {
	opacity: 0;
}

.hovers-radial-in .hovers-content,
.hovers-radial-out:hover .hovers-content,
.hovers-radial-out.active .hovers-content {
	opacity: 1;
}

/* 默认em */
.hovers-border,
.hovers-trim,
.hovers-ripple-out,
.hovers-ripple-in,
.hovers-outline-out,
.hovers-outline-in,
.hovers-reveal {
	font-size: 160px;
	line-height: 16px;
}

/* 内边框滑出 */
.hovers-border,
.hovers-trim {
	position: relative;
	top: 0;
	left: 0;
	transition: all 0.3s;
}

.hovers-border:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	transition: inherit;
	border-width: calc(0.0625em * 0.6);
	border-color: inherit;
	border-style: solid;
	border-radius: inherit;
	opacity: 0;
}

.hovers-border:hover:before,
.hovers-border.active:before {
	opacity: 1;
}

/* 带边距内边框 */
.hovers-trim:before {
	content: '';
	position: absolute;
	top: calc(0.0625em * 0.4);
	left: calc(0.0625em * 0.4);
	bottom: calc(0.0625em * 0.4);
	right: calc(0.0625em * 0.4);
	transition: inherit;
	border-width: calc(0.0625em * 0.6);
	border-color: inherit;
	border-style: solid;
	opacity: 0;
	border-radius: inherit;
}

.hovers-trim:hover:before,
.hovers-trim.active:before {
	opacity: 1;
}

/* 边框飞出与飞入 */
.hovers-ripple-out,
.hovers-ripple-in,
.hovers-outline-out,
.hovers-outline-in,
.hovers-reveal {
	animation-duration: 0.7s;
	animation-timing-function: ease-out;
	transition: all 0.3s;
}

.hovers-ripple-out:before,
.hovers-ripple-in:before,
.hovers-outline-out:before,
.hovers-outline-in:before,
.hovers-reveal:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	animation: inherit;
	transition: inherit;
	border-width: calc(0.0625em * 0.6);
	border-color: inherit;
	border-style: solid;
	border-radius: inherit;
}
.hovers-ripple-out:before {
	opacity: 0;
}
.hovers-ripple-in:before {
	top: calc(-0.0625em * 1.2);
	right: calc(-0.0625em * 1.2);
	bottom: calc(-0.0625em * 1.2);
	left: calc(-0.0625em * 1.2);
	opacity: 0;
}
.hovers-outline-out:before {
	opacity: 0;
}
.hovers-outline-out:before {
	top: calc(-0.0625em * 1.6);
	right: calc(-0.0625em * 1.6);
	bottom: calc(-0.0625em * 1.6);
	left: calc(-0.0625em * 1.6);
	opacity: 0;
}
.hovers-reveal:before {
	border-width: 0;
	opacity: 0;
}

@keyframes ripple-out {
	50% {
		opacity: 1;
	}

	100% {
		top: calc(-0.0625em * 1.2);
		right: calc(-0.0625em * 1.2);
		bottom: calc(-0.0625em * 1.2);
		left: calc(-0.0625em * 1.2);
		opacity: 0;
	}
}
.hovers-ripple-out:hover:before,
.hovers-ripple-out.active:before {
	animation-name: ripple-out;
}

@keyframes ripple-in {
	50% {
		opacity: 1;
	}

	100% {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
	}
}
.hovers-ripple-in:hover:before,
.hovers-ripple-in.active:before {
	animation-name: ripple-in;
}

.hovers-outline-out:hover:before,
.hovers-outline-in:hover:before,
.hovers-outline-out.active:before,
.hovers-outline-in:hover:before {
	top: calc(-0.0625em * 0.8);
	right: calc(-0.0625em * 0.8);
	bottom: calc(-0.0625em * 0.8);
	left: calc(-0.0625em * 0.8);
	opacity: 1;
}

.hovers-reveal:hover:before,
.hovers-reveal.active:before {
	transform: translateY(0);
	border-width: calc(0.0625em * 0.4);
	opacity: 1;
}

/* 圆角化 */
.hovers-round-corners {
	overflow: hidden;
}
.hovers-round-corners:hover,
.hovers-round-corners.active {
	border-radius: 0.0625em;
}

/* 重叠：翻转切换 */

.hover-turn {
	position: relative;
	transform: translateZ(1px);
}

.hover-turn-before,
.hover-turn-after {
	position: absolute;
	top: 0;
	left: 0;
}

@keyframes hover-turn {
	from {
		transform: rotateY(-90deg);
	}

	50% {
		transform: scale(1.2);
	}

	to {
		transform: rotateY(0);
	}
}

.hover-turn:not(:hover) .hover-turn-before,
.hover-turn:hover .hover-turn-after {
	animation: hover-turn 0.5s;
}

.hover-turn:hover .hover-turn-before,
.hover-turn:not(:hover) .hover-turn-after {
	opacity: 0;
}
/* [[Category:在模板名字空间下的CSS页面]] */