模板:Hovers/hover.css

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

• /

/* 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; } /* */