非正式攻略组招募
如果你热爱女神转生 or 异闻录系列 并且愿意为女神异闻录WIKI添砖添瓦
可以加群一起共同建设,招募详情页见攻略组招募公告
模板:TextHover
这是一个专门为大段文字提供Hover效果的模板,基于{{Hovers}}制作。
使用方法
{{TextHover|1=Hover前的文字|2=Hover后的文字|3=如果Hover前的文字较长,这里填before;反之填after;相同长度时可以留空|4=文字水平对齐方向|class=Hover效果|tag=如果强烈希望使用inline模式融入一段文字中,这里填span,否则留空即可}}
尽管这个模板不是为图片Hover设计的,但在某些场合也有助于同时实现桌面版的文字环绕图片效果和移动版的文字、图片分离效果。使用方法为:
{{TextHover|1=Hover前的图片名(内链)|2=Hover后的图片名(内链)|3=如果Hover前的图片较大(指定width参数时需考虑伸缩后的大小,即长宽比),这里填before;反之填after;相同大小时可以留空|4=pic|width=宽度|float=float方向,可省略|margin=桌面版与周围文字的水平间距,默认为0.5em|class=Hover效果}}
如果参数1
至4
中有任一个是html标记,谨慎起见请务必使用命名参数的写法。
示例
表格内居中
{|border=1 style="float: right; width: 260px; font-size: 90%; margin: 1em 0 1em 1em; background: #f9f9f9; border: 1px #999999 solid; border-collapse: collapse; clear: right;" cellpadding="2" cellspacing="0" | colspan="2" |[[file:nisecyugokugo.jpg|250px]] |- | colspan=2 bgcolor="#E0FFFF" |'''{{TextHover|{{lj|基本情報}}|基本资料||center}}''' |- ! width=80px|{{TextHover|{{lj|用語名}}|用语名称|after|center}} | {{TextHover|{{lj|偽中国語}}|伪中国语||center}} |- !{{TextHover|{{lj|用語出典}}|用语出处||center}} | {{TextHover|{{lj|日本国際電子通信網}}|日本网络||center}} |- !{{TextHover|{{lj|関連記事}}|相关条目||center}} | {{TextHover|{{lj|[[中文十級]]、[[君日本語本当上手]]}}|[[中文十級]]、[[君日本語本当上手]]||center}} |}
文件:Nisecyugokugo.jpg | |
基本情報 基本资料 | |
用語名 用语名称 |
偽中国語 伪中国语 |
---|---|
用語出典 用语出处 |
日本国際電子通信網 日本网络 |
関連記事 相关条目 |
段落左对齐(默认)
{{TextHover|{{lj|内容大体初心者日常的出来事及文句、中級者出鱈目話、上級者偽中国語詩程作文可能(実際中国人可能性有)。}}|内容大体上来说新手都是一些日常的事情或抱怨,中级者则为一些瞎编的故事,厉害的人甚至可以拿伪中国语作诗(实际上有可能是中国人)。|after}}
图片
{{textHover|インドア少女 望月杏奈.jpg|Greemas ビビッとアイドル! 望月杏奈.jpg||pic|width=250px|label=「vivid_rabbit」|float=right}} 十分热衷于玩电子游戏,似乎在网络游戏世界是个知名玩家,拥有全世界只有7件的装备之一。 如果身边没有电脑的话就会玩自己的游戏机,没有游戏机的话则会玩手机。在GreeMas卡面和剧情中常能看到杏奈对P撒娇,或要求P和她一起玩游戏。 从GreeMas的卡面和MLTD的特殊动作来看,杏奈可能至少拥有PSP、PSV、PS4和NS等游戏机。 在某款网游中所使用的ID是「'''vivid_rabbit'''」。在该游戏中,杏奈曾与一位ID为「'''lilyknight'''」的人携手干掉了boss。后来在线下见面会中(MLTD设定为组合「少女风暴!」的活动剧情中)杏奈得知「'''lilyknight'''」正是百合子,这也是两人成为好朋友的契机之一。 双海亚美与双海真美姐妹也会和两人一起玩游戏,四人被称为「{{Ruby|765Pro游戏部|{{lj|765プロゲーム部}}}}」。
十分热衷于玩电子游戏,似乎在网络游戏世界是个知名玩家,拥有全世界只有7件的装备之一。
如果身边没有电脑的话就会玩自己的游戏机,没有游戏机的话则会玩手机。在GreeMas卡面和剧情中常能看到杏奈对P撒娇,或要求P和她一起玩游戏。
从GreeMas的卡面和MLTD的特殊动作来看,杏奈可能至少拥有PSP、PSV、PS4和NS等游戏机。
在某款网游中所使用的ID是「vivid_rabbit」。在该游戏中,杏奈曾与一位ID为「lilyknight」的人携手干掉了boss。后来在线下见面会中(MLTD设定为组合「少女风暴!」的活动剧情中)杏奈得知「lilyknight」正是百合子,这也是两人成为好朋友的契机之一。
双海亚美与双海真美姐妹也会和两人一起玩游戏,四人被称为「
已知问题
需要使用行内模式(包括Wikitext的有序和无序列表)时,务必要加上tag=span
。
参见
- 如果想要更为稳定的排版效果,可以考虑基于
display:none
的{{Moe-hover}},但此时不能设置transition
属性。
/* 该文档为一个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, .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, 15deg); }
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:hover, .hovers-swing.active {
transform-origin: top center; 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 {
} .hovers-float:hover, .hovers-float.active {
transition-duration: 0.3s; transition-timing-function: ease-out; transform: translateY(-8px);
}
/* 下沉 */ .hovers-sink {
} .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(-5px); }
}
.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(5px); }
}
.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:hover, .hovers-skew-forward.active {
transform-origin: 0 100%; transform: skew(-10deg);
}
/* 非对称-右 */ .hovers-skew-backward:hover, .hovers-skew-backward.active {
transform-origin: 0 100%; 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) } 33.3% { transform: translate(-6px); } 49.95% { transform: translate(4px); } 66.6% { transform: translate(-2px); } 83.25% { transform: translate(1px); } 100% { transform: translate(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:hover, .hovers-wobble-top.active {
animation-name: wobble-top; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; transform-origin: 0 100%;
}
@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:hover, .hovers-wobble-bottom.active {
animation-name: wobble-bottom; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; transform-origin: 100% 0;
}
/* 颤动 */ @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-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;
}
.hover-turn-before, .hover-turn-after {
position: absolute; top: 0; left: 0; transition: transform 0.5s;
}
@keyframes hover-turn {
from { transform: rotateY(90deg); }
50% { transform: scale(1.2); }
to { transform: rotateY(0); z-index: 3; }
}
@keyframes hover-turn-keep {
from, to { transform: rotateY(0); z-index: 3; }
}
.hover-turn-before {
z-index: 2; animation: hover-turn 0.5s;
}
.hover-turn:hover .hover-turn-before {
animation: none; display: none;
}
.hover-turn:hover .hover-turn-after {
animation: hover-turn 0.5s, hover-turn-keep 999999s 0.5s;
} >使用{{Moe-hover}}时,如果Hover前后文字长度不同,页面可能瞬间伸长/缩短。
- {{Hovers}}拥有丰富的Hover效果,请参考该模板的说明文档设置本模板的
class
、classb
和classa
参数。
/* 该文档为一个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, .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, 15deg); }
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:hover, .hovers-swing.active {
transform-origin: top center; 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 {
} .hovers-float:hover, .hovers-float.active {
transition-duration: 0.3s; transition-timing-function: ease-out; transform: translateY(-8px);
}
/* 下沉 */ .hovers-sink {
} .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(-5px); }
}
.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(5px); }
}
.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:hover, .hovers-skew-forward.active {
transform-origin: 0 100%; transform: skew(-10deg);
}
/* 非对称-右 */ .hovers-skew-backward:hover, .hovers-skew-backward.active {
transform-origin: 0 100%; 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) } 33.3% { transform: translate(-6px); } 49.95% { transform: translate(4px); } 66.6% { transform: translate(-2px); } 83.25% { transform: translate(1px); } 100% { transform: translate(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:hover, .hovers-wobble-top.active {
animation-name: wobble-top; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; transform-origin: 0 100%;
}
@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:hover, .hovers-wobble-bottom.active {
animation-name: wobble-bottom; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; transform-origin: 100% 0;
}
/* 颤动 */ @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-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;
}
.hover-turn-before, .hover-turn-after {
position: absolute; top: 0; left: 0; transition: transform 0.5s;
}
@keyframes hover-turn {
from { transform: rotateY(90deg); }
50% { transform: scale(1.2); }
to { transform: rotateY(0); z-index: 3; }
}
@keyframes hover-turn-keep {
from, to { transform: rotateY(0); z-index: 3; }
}
.hover-turn-before {
z-index: 2; animation: hover-turn 0.5s;
}
.hover-turn:hover .hover-turn-before {
animation: none; display: none;
}
.hover-turn:hover .hover-turn-after {
animation: hover-turn 0.5s, hover-turn-keep 999999s 0.5s;
}
>默认效果为基于opacity
的淡入淡出。