用户:G/hovers.css

/* 
	This document is a hover effect library, which consists of some commonly used effects and some parts of the open source project "Hover.css" on GitHub.
	Please use  to load in the page.
*/

/*HiddenText*/
.hiddentext,
.hiddentext rt{
    background-color:#252525;
}

.hiddentext,
.hiddentext a,
a .hiddentext,
a.new .hiddentext,
span.hiddentext a.new,
span.hiddentext a.external,
span.hiddentext a.external:visited,
span.hiddentext a.extiw,
span.hiddentext a.extiw:visited,
span.hiddentext a.mw-disambig,
span.hiddentext a.mw-redirect{
    transition:color 0.13s linear;
    color:#252525;
    text-shadow:none;
}

span.hiddentext:hover,
span.hiddentext:active{
    color:white;
}

span.hiddentext:hover a,
a:hover span.hiddentext{
    color:lightblue;
}

span.hiddentext:hover a:visited,
a:visited:hover span.hiddentext{
    color:#C5CAE9;
}

span.hiddentext:hover a.new,
a.new:hover span.hiddentext{
    color:#FCC;
}

span.hiddentext a.new:hover:visited,
a.new:hover:visited span.hiddentext{
    color:#EF9A9A;
}

span.hiddentext:hover a.extiw:visited,
a.extiw:visited:hover span.hiddentext{
    color:#D1C4E9;
}

/*hover state switch*/
.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 ; 
}
 
/* Mainly used to make hover-style tab switching */
.hover-tab-mode{
  position:relative ;
  transition:none ;
}
.hover-tab-mode .hover-remote{
  transition:inherit ; 
  position:static ;
}
 
/* Flashing effect */
.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 ;
}
 
/* Base class */
[class *='hovers-']{ 
  display:inline-block ;
  box-shadow:0 0 1px rgba(0,0,0,0);      
  transform: translateY(0);
  vertical-align:middle ;
  transition-duration:0.25s ; 
  transition-property:all ;
}
 
/* Rotate and zoom */
.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);
}
 
/* Rotation */
.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);
}
 
/* Normal => Light */
.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 ; 
}
 
/* Light => Normal */
.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 ; 
}
 
/* Normal => Large */
.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);
}
 
/* Normal => Small */
.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);
}
 
/* Shakeleft and right */
@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 ;
}
 
/* Shake up and down */
@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 ;
}
 
 
/* Normal => Large */
@keyframes pulse-grow{
  to{
    transform : scale(1.1);
  }
}
 
.hovers-pulse-grow:hover,
.hovers-pulse-grow .active{
  animation:pulse-grow 0.5s linear infinite alternate ;
}
 
/* Normal => Small */
@keyframes pulse-shrink{
  to{
    transform : scale(0.9);
  }
}
 
.hovers-pulse-shrink:hover,
.hovers-pulse-shrink .active{
  animation:pulse-shrink 0.5s linear infinite alternate ;
}
 
/* Normal => Small */
@keyframes push{
  50%{ 
    transform : scale(0.8);
  }
}
 
.hovers-push:hover,
.hovers-push .active{
  animation:push 0.3s linear ;
}
 
/* Normal => Large */
@keyframes pop{
  50%{ 
    transform : scale(1.2);
  }
}
 
.hovers-pop:hover,
.hovers-pop .active{
  animation:pop 0.3s linear ;
}
 
/* normal => large => normal => large */
.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);   
}
 
/* normal => small => normal => small */
.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);   
}
 
/* Tilt */
.hovers-tilt:hover,
.hovers-tilt .active{
  transition-duration:0.3s ; 
  transform : rotate(4deg);
}
 
/* Tilt + Zoom */
.hovers-grow-rotate:hover,
.hovers-grow-rotate .active{
  transition-duration:0.3s ; 
  transform : scale(1.1) rotate(4deg);
}
 
/* rise */
.hovers-float:hover,
.hovers-float .active{
  transition-duration:0.3s ; 
  transition-timing-function:ease-out ;
  transform : translateY(-8px);
}
 
/* sink */
.hovers-sink:hover,
.hovers-sink .active{
  transition-duration:0.3s ; 
  transition-timing-function:ease-out ;
  transform : translateY(8px);
}
 
/* Floating */
@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 ;
}
 
/* Hanging */
@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 ;
}
 
/* Asymmetric */
.hovers-skew:hover,
.hovers-skew .active{
  transform : skew(-10deg);
}
 
/* Asymmetric-left */
.hovers-skew-forward{
  transform-origin:0 100% ;  
}
.hovers-skew-forward:hover,
.hovers-skew-forward .active{
  transform : skew(-10deg);
}
 
/* Asymmetric-right */
.hovers-skew-backward{
  transform-origin:0 100% ;  
}
.hovers-skew-backward:hover,
.hovers-skew-backward .active{
  transform : skew(10deg);
}
 
/* Vertical jitter */
@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 ; 
}
 
/* Horizontal jitter */
@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 ; 
}
 
/* Bottom right bounce */
@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 ; 
}
 
/* Bounce to the upper right*/
@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 ; 
}
 
/* Jelly */
@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);
  }
}
 
/* Fat */
.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 ; 
}
 
/* Vibration */
@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 ; 
}
 
/* Vibration */
@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 ;
}
 
/* Vibrate out*/
@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 ; 
}
 
/* Shift right */
.hovers-forward:hover,
.hovers-forward .active{
  transform : translateX(8px);
}
 
/* Shiftleft */
.hovers-backward:hover,
.hovers-backward .active{
  transform : translateX(-8px);
}
 
/* Free movement */
.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);
}
 
/* Filters */
.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);
}
 
.hover-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);
}
 
/* Background sliding */
.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 ; 
}
 
/* default 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 ; 
}
 
/* Inner border slides out */
.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 ; 
}
 
/* Inner border with margins*/
.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 ; 
}
 
/* Border flying out and flying in*/
.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 ; 
}
 
/* Rounded corners */
.hovers-round-corners{
  overflow:hidden ;
}
.hovers-round-corners:hover,
.hovers-round-corners .active{
  border-radius:0.0625em ; 
}

/*
Source: https://zh.moegirl.org.cn/Template:Hovers/hover.css
This page is copied from Moegirl Encyclopedia(https://zh.moegirl.org.cn), and the text content uses the Creative Commons Attribution-Non-Commercial Use-Share Alike 3.0 Mainland China Agreement by default.
[[Category:民间模板]]
*/