编辑“Template:Hovers/hover.css”
跳到导航
跳到搜索
该编辑可以被撤销。 请检查下面的对比以核实您想要撤销的内容,然后发布下面的更改以完成撤销。
最后版本 | 您的文本 | ||
第1,271行: | 第1,271行: | ||
.hover-turn:hover .hover-turn-after { | .hover-turn:hover .hover-turn-after { | ||
animation: hover-turn 0.5s, hover-turn-keep 999999s 0.5s; | animation: hover-turn 0.5s, hover-turn-keep 999999s 0.5s; | ||
} | |||
/* | |||
新增active特效库。 | |||
*/ | |||
/* active状态切换 */ | |||
.actives-change, | |||
.actives-remote { | |||
position: relative; | |||
display: inline-block; | |||
transition: opacity 0.5s linear; | |||
} | |||
.actives-change-before, | |||
.actives-change-after, | |||
.actives-remote-target { | |||
transition: inherit; | |||
} | |||
.actives-change-after, | |||
.actives-remote-target { | |||
opacity: 0; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
} | |||
.actives-remote-target { | |||
left: 100%; | |||
} | |||
.actives-change-after[style^='right:'], | |||
.actives-change-after[style*=' right:'], | |||
.actives-remote-after[style^='right:'], | |||
.actives-remote-after[style*=' right:'] { | |||
left: initial; | |||
} | |||
.actives-change-after[style^='bottom:'], | |||
.actives-change-after[style*=' bottom:'], | |||
.actives-remote-after[style^='bottom:'], | |||
.actives-remote-after[style*=' bottom:'] { | |||
top: initial; | |||
} | |||
.actives-change-after:active, | |||
.actives-remote-target { | |||
opacity: 0; | |||
margin-left: -9999px; | |||
} | |||
/* 主要用于制作active形式的标签页(tab)切换 */ | |||
.actives-tab-mode { | |||
position: relative; | |||
transition: none; | |||
} | |||
.actives-tab-mode .actives-remote { | |||
transition: inherit; | |||
position: static; | |||
} | |||
/* 闪烁效果 */ | |||
.actives-change.flash:active .actives-change-before { | |||
margin-left: -9999px; | |||
} | |||
.actives-change:active > .actives-change-before, | |||
.actives-remote > .actives-remote-target, | |||
.actives-change:active > a > .actives-change-before, | |||
.actives-remote > a > .actives-remote-target { | |||
opacity: 0; | |||
} | |||
.actives-change:active > .actives-change-after, | |||
.actives-remote:active > .actives-remote-target, | |||
.actives-change:active > a > .actives-change-after, | |||
.actives-remote:active > a > .actives-remote-target { | |||
opacity: 1; | |||
margin-left: initial; | |||
} | |||
/* 基类 */ | |||
[class*='actives-'] { | |||
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; | |||
} | |||
/* 旋转放大 */ | |||
.actives-rotate-shrink { | |||
transition-duration: 0.5s; | |||
transform: rotate(0) scale(0.75); | |||
} | |||
.actives-rotate-shrink:active { | |||
transform: rotate(360deg) scale(1); | |||
} | |||
/* 旋转 */ | |||
.actives-rotate, | |||
.actives-rotate-reverse:active { | |||
transition-duration: 0.5s; | |||
transform: rotate(0); | |||
} | |||
.actives-rotate-reverse, | |||
.actives-rotate:active { | |||
transition-duration: 0.5s; | |||
transform: rotate(360deg); | |||
} | |||
/* 正常 => 浅 */ | |||
.actives-fade-deep, | |||
.actives-fade, | |||
.actives-fade-shallow { | |||
opacity: 1; | |||
} | |||
.actives-fade-deep:active, | |||
.actives-fade-deep.actives { | |||
opacity: 0.35; | |||
} | |||
.actives-fade:active, | |||
.actives-fade.actives { | |||
opacity: 0.5; | |||
} | |||
.actives-fade-shallow:active, | |||
.actives-fade-shallow.actives { | |||
opacity: 0.75; | |||
} | |||
/* 浅 => 正常 */ | |||
.actives-bloom-deep { | |||
opacity: 0.35; | |||
} | |||
.actives-bloom { | |||
opacity: 0.5; | |||
} | |||
.actives-bloom-shallow { | |||
opacity: 0.75; | |||
} | |||
.actives-bloom-deep:active, | |||
.actives-bloom-deep.actives, | |||
.actives-bloom:active, | |||
.actives-bloom.actives, | |||
.actives-bloom-shallow:active, | |||
.actives-bloom-shallow.actives { | |||
opacity: 1; | |||
} | |||
/* 正常 => 大 */ | |||
.actives-grow-deep, | |||
.actives-grow, | |||
.actives-grow-shallow { | |||
transform: scale(1); | |||
} | |||
.actives-grow-deep:active, | |||
.actives-grow-deep.actives { | |||
transform: scale(1.5); | |||
} | |||
.actives-grow:active, | |||
.actives-grow.actives { | |||
transform: scale(1.25); | |||
} | |||
.actives-grow-shallow:active, | |||
.actives-grow-shallow.actives { | |||
transform: scale(1.1); | |||
} | |||
/* 正常 => 小 */ | |||
.actives-shrink-deep:active, | |||
.actives-shrink-deep.actives, | |||
.actives-shrink:active, | |||
.actives-shrink.actives, | |||
.actives-shrink-shallow:active, | |||
.actives-shrink-shallow.actives { | |||
transform: scale(1); | |||
} | |||
.actives-shrink-deep { | |||
transform: scale(0.5); | |||
} | |||
.actives-shrink { | |||
transform: scale(0.75); | |||
} | |||
.actives-shrink-shallow { | |||
transform: scale(0.9); | |||
} | |||
/* 左右抖动 */ | |||
@keyframes shake-flexible { | |||
25% { | |||
transform: translateX(-0.0625em); | |||
} | |||
50% { | |||
transform: translateX(0.0625em); | |||
} | |||
75% { | |||
transform: translateX(-0.0625em); | |||
} | |||
} | |||
.actives-shake-flexible:active, | |||
.actives-shake-flexible.actives { | |||
animation: shake-flexible 0.5s ease-out; | |||
} | |||
@keyframes shake { | |||
25% { | |||
transform: translateX(-8px); | |||
} | |||
50% { | |||
transform: translateX(8px); | |||
} | |||
75% { | |||
transform: translateX(-8px); | |||
} | |||
} | |||
.actives-shake:active, | |||
.actives-shake.actives { | |||
animation: shake 0.5s ease-out; | |||
} | |||
/* 上下抖动 */ | |||
@keyframes bounce-flexible { | |||
25% { | |||
transform: translateY(-0.0625em); | |||
} | |||
50% { | |||
transform: translateY(0.0625em); | |||
} | |||
75% { | |||
transform: translateY(-0.0625em); | |||
} | |||
} | |||
.actives-bounce-flexible:active, | |||
.actives-bounce-flexible.actives { | |||
animation: bounce-flexible 0.5s ease-out; | |||
} | |||
@keyframes bounce { | |||
25% { | |||
transform: translateY(-8px); | |||
} | |||
50% { | |||
transform: translateY(8px); | |||
} | |||
75% { | |||
transform: translateY(-8px); | |||
} | |||
} | |||
.actives-bounce:active, | |||
.actives-bounce.actives { | |||
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); | |||
} | |||
} | |||
.actives-swing:active, | |||
.actives-swing.actives { | |||
transform-origin: top center; | |||
animation: swing 0.75s ease-out; | |||
} | |||
/* 正常 => 大 */ | |||
@keyframes pulse-grow { | |||
to { | |||
transform: scale(1.1); | |||
} | |||
} | |||
.actives-pulse-grow:active, | |||
.actives-pulse-grow.actives { | |||
animation: pulse-grow 0.5s linear infinite alternate; | |||
} | |||
/* 正常 => 小 */ | |||
@keyframes pulse-shrink { | |||
to { | |||
transform: scale(0.9); | |||
} | |||
} | |||
.actives-pulse-shrink:active, | |||
.actives-pulse-shrink.actives { | |||
animation: pulse-shrink 0.5s linear infinite alternate; | |||
} | |||
/* 正常 => 小 */ | |||
@keyframes push { | |||
50% { | |||
transform: scale(0.8); | |||
} | |||
} | |||
.actives-push:active, | |||
.actives-push.actives { | |||
animation: push 0.3s linear; | |||
} | |||
/* 正常 => 大 */ | |||
@keyframes pop { | |||
50% { | |||
transform: scale(1.2); | |||
} | |||
} | |||
.actives-pop:active, | |||
.actives-pop.actives { | |||
animation: pop 0.3s linear; | |||
} | |||
/* 正常 => 大 => 正常 => 大 */ | |||
.actives-bounce-in:active, | |||
.actives-bounce-in.actives { | |||
transform: scale(1.2); | |||
transition-duration: 0.5s; | |||
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); | |||
} | |||
/* 正常 => 小 => 正常 => 小 */ | |||
.actives-bounce-out:active, | |||
.actives-bounce-out.actives { | |||
transform: scale(0.8); | |||
transition-duration: 0.5s; | |||
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); | |||
} | |||
/* 倾斜 */ | |||
.actives-tilt:active, | |||
.actives-tilt.actives { | |||
transition-duration: 0.3s; | |||
transform: rotate(4deg); | |||
} | |||
/* 倾斜 + 放大 */ | |||
.actives-grow-rotate:active, | |||
.actives-grow-rotate.actives { | |||
transition-duration: 0.3s; | |||
transform: scale(1.1) rotate(4deg); | |||
} | |||
/* 升起 */ | |||
.actives-float { | |||
} | |||
.actives-float:active, | |||
.actives-float.actives { | |||
transition-duration: 0.3s; | |||
transition-timing-function: ease-out; | |||
transform: translateY(-8px); | |||
} | |||
/* 下沉 */ | |||
.actives-sink { | |||
} | |||
.actives-sink:active, | |||
.actives-sink.actives { | |||
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); | |||
} | |||
} | |||
.actives-bob:active, | |||
.actives-bob.actives { | |||
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); | |||
} | |||
} | |||
.actives-hang:active, | |||
.actives-hang.actives { | |||
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; | |||
} | |||
/* 非对称 */ | |||
.actives-skew:active, | |||
.actives-skew.actives { | |||
transform: skew(-10deg); | |||
} | |||
/* 非对称-左 */ | |||
.actives-skew-forward:active, | |||
.actives-skew-forward.actives { | |||
transform-origin: 0 100%; | |||
transform: skew(-10deg); | |||
} | |||
/* 非对称-右 */ | |||
.actives-skew-backward:active, | |||
.actives-skew-backward.actives { | |||
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); | |||
} | |||
} | |||
.actives-wobble-vertical:active, | |||
.actives-wobble-vertical.actives { | |||
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); | |||
} | |||
} | |||
.actives-wobble-horizontal:active, | |||
.actives-wobble-horizontal.actives { | |||
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); | |||
} | |||
} | |||
.actives-wobble-to-bottom-right:active, | |||
.actives-wobble-to-bottom-right.actives { | |||
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); | |||
} | |||
} | |||
.actives-wobble-to-top-right:active, | |||
.actives-wobble-to-top-right.actives { | |||
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); | |||
} | |||
} | |||
/* 赘肉 */ | |||
.actives-wobble-top:active, | |||
.actives-wobble-top.actives { | |||
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); | |||
} | |||
} | |||
.actives-wobble-bottom:active, | |||
.actives-wobble-bottom.actives { | |||
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); | |||
} | |||
} | |||
.actives-wobble-skew:active, | |||
.actives-wobble-skew.actives { | |||
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); | |||
} | |||
} | |||
.actives-buzz:active, | |||
.actives-buzz.actives { | |||
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); | |||
} | |||
} | |||
.actives-buzz-out:active, | |||
.actives-buzz-out.actives { | |||
animation-name: buzz-out; | |||
animation-duration: 0.75s; | |||
animation-timing-function: linear; | |||
animation-iteration-count: 1; | |||
} | |||
/* 右移 */ | |||
.actives-forward:active, | |||
.actives-forward.actives { | |||
transform: translateX(8px); | |||
} | |||
/* 左移 */ | |||
.actives-backward:active, | |||
.actives-backward.actives { | |||
transform: translateX(-8px); | |||
} | |||
/* 自由移动 */ | |||
.actives-top, | |||
.actives-left, | |||
.actives-bottom, | |||
.actives-right { | |||
transition: all 0.5s; | |||
} | |||
.actives-top:active, | |||
.actives-top.actives { | |||
transform: translateY(-0.0625em); | |||
} | |||
.actives-left:active, | |||
.actives-left.actives { | |||
transform: translateX(-0.0625em); | |||
} | |||
.actives-bottom:active, | |||
.actives-bottom.actives { | |||
transform: translateY(0.0625em); | |||
} | |||
.actives-right:active, | |||
.actives-right.actives { | |||
transform: translateX(0.0625em); | |||
} | |||
/* 滤镜 */ | |||
.actives-blur, | |||
.actives-blur-reverse, | |||
.actives-brightness, | |||
.actives-brightness-reverse, | |||
.actives-contrast, | |||
.actives-contrast-reverse, | |||
.actives-grayscale, | |||
.actives-grayscale-reverse, | |||
.actives-invert, | |||
.actives-invert-reverse, | |||
.actives-saturate, | |||
.actives-saturate-reverse, | |||
.actives-sepia, | |||
.actives-sepia-reverse, | |||
.actives-hue-rotate, | |||
.actives-hue-rotate-reverse { | |||
transition-duration: 0.75s; | |||
} | |||
.actives-blur:active, | |||
.actives-blur.actives, | |||
.actives-brightness:active, | |||
.actives-brightness.actives, | |||
.actives-contrast:active, | |||
.actives-contrast.actives, | |||
.actives-grayscale:active, | |||
.actives-grayscale.actives, | |||
.actives-invert:active, | |||
.actives-invert.actives, | |||
.actives-saturate:active, | |||
.actives-saturate.actives, | |||
.actives-sepia:active, | |||
.actives-sepia.actives, | |||
.actives-hue-rotate:active, | |||
.actives-hue-rotate.actives { | |||
filter: initial; | |||
} | |||
.actives-blur { | |||
filter: blur(5px); | |||
} | |||
.actives-blur-reverse:active, | |||
.actives-blur-reverse.actives { | |||
filter: blur(5px); | |||
} | |||
.actives-brightness { | |||
filter: brightness(50%); | |||
} | |||
.actives-brightness-reverse:active, | |||
.actives-brightness-reverse.actives { | |||
filter: brightness(50%); | |||
} | |||
.actives-contrast { | |||
filter: contrast(50%); | |||
} | |||
.actives-contrast-reverse:active, | |||
.actives-contrast-reverse.actives { | |||
filter: contrast(50%); | |||
} | |||
.actives-grayscale-reverse:active, | |||
.actives-grayscale-reverse.actives { | |||
filter: grayscale(100%); | |||
} | |||
.actives-invert { | |||
filter: invert(100%); | |||
} | |||
.actives-invert-reverse:active, | |||
.actives-invert-reverse.actives { | |||
filter: invert(100%); | |||
} | |||
.actives-saturate { | |||
filter: saturate(200%); | |||
} | |||
.actives-saturate-reverse:active, | |||
.actives-saturate-reverse.actives { | |||
filter: saturate(200%); | |||
} | |||
.actives-sepia { | |||
filter: sepia(100%); | |||
} | |||
.actives-sepia-reverse:active, | |||
.actives-sepia-reverse.acitve { | |||
filter: sepia(100%); | |||
} | |||
.actives-hue-rotate { | |||
filter: hue-rotate(180deg); | |||
} | |||
.actives-hue-rotate-reverse:active, | |||
.actives-hue-rotate-reverse.actives { | |||
filter: hue-rotate(180deg); | |||
} | |||
/* 背景滑动 */ | |||
.actives-sweep-to-right, | |||
.actives-sweep-to-left, | |||
.actives-sweep-to-bottom, | |||
.actives-sweep-to-top, | |||
.actives-radial-out, | |||
.actives-radial-in { | |||
position: relative; | |||
transition-duration: 0.3s; | |||
transition-timing-function: ease-out; | |||
overflow: hidden; | |||
} | |||
.actives-sweep-to-right:before, | |||
.actives-sweep-to-left:before, | |||
.actives-sweep-to-bottom:before, | |||
.actives-sweep-to-top:before, | |||
.actives-radial-out:before, | |||
.actives-radial-in:before { | |||
content: ''; | |||
position: absolute; | |||
z-index: 10; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
background: inherit; | |||
transform: scaleX(0); | |||
transition: inherit; | |||
} | |||
.actives-sweep-to-bottom:before, | |||
.actives-sweep-to-top:before { | |||
transform: scaleY(0); | |||
} | |||
.actives-radial-out:before, | |||
.actives-radial-in:before { | |||
border-radius: 50%; | |||
transform: scale(0); | |||
} | |||
.actives-radial-in:before { | |||
transform: scale(2); | |||
} | |||
.actives-sweep-to-right:before { | |||
transform-origin: 0 50%; | |||
} | |||
.actives-sweep-to-left:before { | |||
transform-origin: 100% 50%; | |||
} | |||
.actives-sweep-to-bottom:before { | |||
transform-origin: 50% 0; | |||
} | |||
.actives-sweep-to-top:before { | |||
transform-origin: 50% 100%; | |||
} | |||
.actives-radial-out:active:before, | |||
.actives-radial-out.actives:before { | |||
transform: scale(2); | |||
} | |||
.actives-radial-in:active:before, | |||
.actives-radial-in.actives:before { | |||
transform: scale(0); | |||
} | |||
.actives-sweep-to-right .actives-content.center, | |||
.actives-sweep-to-left .actives-content.center, | |||
.actives-sweep-to-bottom .actives-content.center, | |||
.actives-sweep-to-top .actives-content.center, | |||
.actives-radial-out .actives-content.center, | |||
.actives-radial-in .actives-content.center { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
word-break: break-all; | |||
} | |||
.actives-sweep-to-right:active:before, | |||
.actives-sweep-to-left:active:before, | |||
.actives-sweep-to-bottom:active:before, | |||
.actives-sweep-to-top:active:before, | |||
.actives-sweep-to-right.actives:before, | |||
.actives-sweep-to-left:active:before, | |||
.actives-sweep-to-bottom:active:before, | |||
.actives-sweep-to-top:active:before { | |||
transform: scaleX(1); | |||
} | |||
.actives-sweep-to-right .actives-content, | |||
.actives-sweep-to-left .actives-content, | |||
.actives-sweep-to-bottom .actives-content, | |||
.actives-sweep-to-top .actives-content, | |||
.actives-radial-out .actives-content, | |||
.actives-radial-in .actives-content { | |||
width: 100%; | |||
height: 100%; | |||
position: absolute; | |||
transition-property: all; | |||
transition-duration: inherit; | |||
top: 0; | |||
left: 0; | |||
z-index: 11; | |||
} | |||
.actives-sweep-to-right .actives-content { | |||
left: initial; | |||
right: 100%; | |||
} | |||
.actives-sweep-to-right:active .actives-content, | |||
.actives-sweep-to-right.actives .actives-content { | |||
right: 0; | |||
} | |||
.actives-sweep-to-left .actives-content { | |||
left: 100%; | |||
} | |||
.actives-sweep-to-left:active .actives-content, | |||
.actives-sweep-to-left.actives .actives-content { | |||
left: 0; | |||
} | |||
.actives-sweep-to-bottom .actives-content { | |||
top: initial; | |||
bottom: 100%; | |||
} | |||
.actives-sweep-to-bottom:active .actives-content, | |||
.actives-sweep-to-bottom.actives .actives-content { | |||
bottom: 0; | |||
} | |||
.actives-sweep-to-top .actives-content { | |||
top: 100%; | |||
} | |||
.actives-sweep-to-top:active .actives-content, | |||
.actives-sweep-to-top.actives .actives-content { | |||
top: 0; | |||
} | |||
.actives-radial-out .actives-content, | |||
.actives-radial-in:active .actives-content, | |||
.actives-radial-in.actives .actives-content { | |||
opacity: 0; | |||
} | |||
.actives-radial-in .actives-content, | |||
.actives-radial-out:active .actives-content, | |||
.actives-radial-out.actives .actives-content { | |||
opacity: 1; | |||
} | |||
/* 默认em */ | |||
.actives-border, | |||
.actives-trim, | |||
.actives-ripple-out, | |||
.actives-ripple-in, | |||
.actives-outline-out, | |||
.actives-outline-in, | |||
.actives-reveal { | |||
font-size: 160px; | |||
line-height: 16px; | |||
} | |||
/* 内边框滑出 */ | |||
.actives-border, | |||
.actives-trim { | |||
position: relative; | |||
top: 0; | |||
left: 0; | |||
transition: all 0.3s; | |||
} | |||
.actives-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; | |||
} | |||
.actives-border:active:before, | |||
.actives-border.actives:before { | |||
opacity: 1; | |||
} | |||
/* 带边距内边框 */ | |||
.actives-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; | |||
} | |||
.actives-trim:active:before, | |||
.actives-trim.actives:before { | |||
opacity: 1; | |||
} | |||
/* 边框飞出与飞入 */ | |||
.actives-ripple-out, | |||
.actives-ripple-in, | |||
.actives-outline-out, | |||
.actives-outline-in, | |||
.actives-reveal { | |||
animation-duration: 0.7s; | |||
animation-timing-function: ease-out; | |||
transition: all 0.3s; | |||
} | |||
.actives-ripple-out:before, | |||
.actives-ripple-in:before, | |||
.actives-outline-out:before, | |||
.actives-outline-in:before, | |||
.actives-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; | |||
} | |||
.actives-ripple-out:before { | |||
opacity: 0; | |||
} | |||
.actives-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; | |||
} | |||
.actives-outline-out:before { | |||
opacity: 0; | |||
} | |||
.actives-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; | |||
} | |||
.actives-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; | |||
} | |||
} | |||
.actives-ripple-out:active:before, | |||
.actives-ripple-out.actives:before { | |||
animation-name: ripple-out; | |||
} | |||
@keyframes ripple-in { | |||
50% { | |||
opacity: 1; | |||
} | |||
100% { | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
opacity: 0; | |||
} | |||
} | |||
.actives-ripple-in:active:before, | |||
.actives-ripple-in.actives:before { | |||
animation-name: ripple-in; | |||
} | |||
.actives-outline-out:active:before, | |||
.actives-outline-in:active:before, | |||
.actives-outline-out.actives:before, | |||
.actives-outline-in:active: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; | |||
} | |||
.actives-reveal:active:before, | |||
.actives-reveal.actives:before { | |||
transform: translateY(0); | |||
border-width: calc(0.0625em * 0.4); | |||
opacity: 1; | |||
} | |||
/* 圆角化 */ | |||
.actives-round-corners { | |||
overflow: hidden; | |||
} | |||
.actives-round-corners:active, | |||
.actives-round-corners.actives { | |||
border-radius: 0.0625em; | |||
} | |||
/* 重叠:翻转切换 */ | |||
.actives-turn { | |||
position: relative; | |||
} | |||
.actives-turn-before, | |||
.actives-turn-after { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
transition: transform 0.5s; | |||
} | |||
@keyframes active-turn { | |||
from { | |||
transform: rotateY(90deg); | |||
} | |||
50% { | |||
transform: scale(1.2); | |||
} | |||
to { | |||
transform: rotateY(0); | |||
z-index: 3; | |||
} | |||
} | |||
@keyframes active-turn-keep { | |||
from, | |||
to { | |||
transform: rotateY(0); | |||
z-index: 3; | |||
} | |||
} | |||
.actives-turn-before { | |||
z-index: 2; | |||
animation: active-turn 0.5s; | |||
} | |||
.actives-turn:active .actives-turn-before { | |||
animation: none; | |||
display: none; | |||
} | |||
.actives-turn:active .actives-turn-after { | |||
animation: active-turn 0.5s, active-turn-keep 999999s 0.5s; | |||
} | } |