帮助:Hovers

使用该模板需要掌握一些HTML和CSS的基础知识。

×

介绍

零件内容

该模板为一个hover效果的样式库，由一些常用的效果以及GitHub上的开源项目“Hover.css”的2D Transitions部分构成。

“hover”效果为鼠标移入元素时元素发生变化，移出时还原。

用法

除hover状态切换(指交替、遥控、翻转切换这三个效果)以外，其他效果hovers-前缀都是必须的，这用于与其他类区分并提供一些基础的样式。

可以理解为：

hover状态切换的前缀为：hover-
其他效果的前缀为：hovers-

如将用户框

施加“振出”效果：

<div class="hovers-buzz-out">{{#tag:bilicontributors|57078402}}</div>

咻咪啾咪

+关注

被施加特效的元素将变为行内块(inline-block)，若这对排版发生影响，请手动覆盖。

在使用html标签时请注意：换行将产生额外的p标签，请在换行时使用注释。

添加active类将直接显示hover的效果。

hover状态切换

该样式库还提供了几种利用hover进行状态切换的效果。

除“遥控”外，其他效果在父容器内均使用-before和-after来表示状态切换前和切换后显示的内容。

交替

可以在hover-change后再添加一个flash类，提供一个hover进入时的闪烁效果。

<div class="hover-change">
<div class="hover-change-before">[[file:立绘·吕布.png|120px|link=]]</div>
<div class="hover-change-after">[[file:立绘·诸葛亮.png|120px|link=]]</div>
</div>

遥控

<div class="hover-remote">
  <div style="width:100px; height:100px; background:blue"></div>
  <div class="hover-remote-target" style="left:300px;">
    <div style="width:100px; height:100px; background:red;"></div>
  </div>
</div>

交替效果的hover-change-after和遥控效果的hover-remote-target都用到了css绝对定位，以各自的父元素hover-change和hover-remote为原点，交替效果默认位置偏移为top:0; left:0，遥控效果默认位置偏移为top:0; left:100%。它们的值都可以覆盖，若设置了相反的方向，则对应的默认位置偏移将变为auto（top和left本身的原始默认值），例如设置了bottom:10px，则默认的top:0将变为top:auto。

过渡时长默认为0.5秒，若要修改请在对应节点设置transition-duration属性。

标签栏

<!-- 由于标签栏内容为定位元素，这里需要使用外边距为其留出位置 -->
<div class="hover-tab-mode" style="margin-bottom:200px;"><!--
-->{{#vardefine:tabButtonStyle|width:70px; height:25px; text-align:center; line-height:25px; background:#666; color:white; border:1px #ccc solid; display:inline-block; cursor:pointer}}<!--
-->{{#vardefine:tabPanelStyle|position:absolute; top:25px; left:0; width:400px; height:200px; border:1px #666 solid; background:#eee;}}<!--
-->
<div class="hover-remote">
<div style="{{#var:tabButtonStyle}}">标签一</div>
<div style="{{#var:tabPanelStyle}}">标签内容一</div>  <!-- 默认显示的标签栏内容不要添加hover-remote-target -->
</div>

<div class="hover-remote">
<div style="{{#var:tabButtonStyle}}">标签二</div>
<div class="hover-remote-target" style="{{#var:tabPanelStyle}}">标签内容二</div>
</div>

<div class="hover-remote">
<div style="{{#var:tabButtonStyle}}">标签三</div>
<div class="hover-remote-target" style="{{#var:tabPanelStyle}}">标签内容三</div>
</div>

</div>

标签一

标签内容一

标签二

标签内容二

标签三

标签内容三

这里就实现了一个以hover制作的标签栏。在hover-remote外层div添加hover-tab-mode后，其中所有的hover-remote-target元素在触发hover效果时定位都会以hover-tab-mode的元素为基点。

翻转切换

<div class="hover-turn" style="width:105px; height:105px">  <!-- 由于效果本身的原因，必须手动设置宽高 -->
  <div class="hover-turn-before"> 
    [[file:立绘·吕布.png|120px|link=]]
    <!-- 这里用到了一些雪碧图技术，详情可以参考template:image，普通的以[[file:]]格式引用的图片也是可以正常使用该效果的 -->
  </div>
  <div class="hover-turn-after">
    [[file:立绘·诸葛亮.png|120px|link=]]
  </div>
</div>

该效果比较适合在两张规格相同的图片中进行切换，需要手动设置容器宽高，否则默认为0不显示。

瑕疵：在刚载入页面时会播放一次过渡效果。

效果介绍

固定效果

固定效果中各个参数都为固定值，但有些效果提供多个级别供使用。

具有可选级别的效果的后缀都有-deep和-shallow两种，其中-deep表示变化效果较强，-shallow变化效果较弱，具体请通过后面提供的效果展示来参考。

带有蓝色标记的动画可以与不同类的效果互相组合使用。

fade, fade-deep, fade-shallow（正常 => 浅）^{[透明度类]}

bloom, bloom-deep, bloom-shallow（浅 => 正常）^{[透明度类]}

grow, grow-deep, grow-shallow（正常 => 大）^[尺寸类]

shrink, shrink-deep, shrink-shallow（小 => 正常）^[尺寸类]
shake（左右抖动）
bounce（上下抖动）
pulse-grow（正常 => 大【动画】）
pulse-shrink（正常 => 小【动画】）
push（正常 => 小）
pop（正常 => 大）
bounce-in（正常 => 大 => 正常 => 大）
bounce-out（正常 => 小 => 正常 => 小）
tilt（倾斜）
grow-rotate（倾斜 + 放大）
float（上移）^{[垂直移动类]}
sink（下移）^{[垂直移动类]}
bob（飘浮）
hang（悬挂）
skew（非对称）
skew-forward（非对称-左）
skew-backward（非对称-右）
swing（绕顶端中点抖动）
wobble-vertical（垂直抖动）
wobble-horizontal （水平抖动）
wobble-to-bottom-right（右下弹回）
wobble-to-top-right（右上弹回）
wobble-top（果冻）
wobble-bottom（赘肉）
wobble-skew（颤动）
buzz（振动）
buzz-out（振出）
forward（右移）^{[水平移动类]}
backward（左移）^{[水平移动类]}
rotate（旋转）
rotate-reverse（逆时针旋转）
rotate-shink（360度旋转 + 小 => 正常）

滤镜类

均为触发hover效果后还原，如果需要触发后显示效果，需要在后面加上-reverse，例如blur-reverse就是鼠标移入后变模糊。滤镜类可以和所有其他类共用。

blur（高斯模糊）
brightness（明度50%）
contrast（对比度50%）
grayscale（转换为灰度图像）
invert（负片）
saturate（2倍饱和度）
sepia（转换为深褐色）
hue-rotate（色相反转）

背景类

背景类需要定义一组标签来使用。具体用法请参考：#示例5

sweep-to-right（右滑入）
sweep-to-left（左滑入）
sweep-to-bottom（下滑入）
sweep-to-top（上滑入）
radial-out（包围）
radial-in（展开）

边框类

边框类必须将类添加在其父元素上。具体用法请参考：#示例6

border（框选）
trim（锁定）
ripple-out（挥发）
ripple-in（聚集）
outline-out（紧握）
outline-in（伸展）
reveal（渗入）
round-corners（圆角化）

可变效果

可控效果通过当前节点的css属性font-size来控制幅度（也会受该值的影响，这取决于当前位置的文字大小，或是从父元素继承而来的文字大小），默认为该数值的0.0625倍，在文字大小为16px时，值为1px。

因为技术限制，暂时只能采取这种控制方法，同时这也带来了一些问题，请务必注意：

这会影响节点内部的文字显示，你可以在内部再添加一个标签或使用{{font}}模板来控制内部的文字大小。
因为默认line-height等于font-size，这会导致位置内部元素的位置受到影响，需要手动设置line-height为需要的文字大小。更简单的办法是推荐使用弹性布局(flex)，这也能更好的帮助抵消过大的font-size带来的其他副作用。这有一篇教程供学习和参考：阮一峰的网络日志：Flex 布局教程。
chrome以及一些国产套壳浏览器字体最小值为12px，即使设置了更小的值也不会产生效果。所以为了在所有浏览器上保持效果的一致请不要设置小于12px的值。当文字大小为12px时值为0.75px。

位置移动类

shake-flexible（左右抖动）
bounce-flexible（上下抖动）
top（向上移动，同float）^{[垂直移动类]}
left（向左移动，同backward）^{[水平移动类]}
bottom（向下移动，同sink）^{[垂直移动类]}
right（向右移动，同forward）^{[水平移动类]}

边框类

border（框选）
trim（锁定）
ripple-out（挥发）
ripple-in（聚集）
outline-out（紧握）
outline-in（伸展）
reveal（渗入）
round-corners（圆角化）

注意：除“圆角化”以外，其他边框类因同时涉及宽度和距离、以及各效果之间的不同，因此以比例形式控制。font-size:160px为默认值，比例为1，例如想让边框宽度变为2倍，则设置font-size:320px，这里同样受webkit内核浏览器字体最小值12px的限制。

示例

示例1

<div class="hovers-wobble-top" style="width:100px; line-height:100px; background:blue; text-align:center; color:white; font-weight:bold">Blue</div>

Blue

示例2

<span class="hovers-buzz" style="font-size:26px; color:red">Sample</span>

Sample

示例3

<div class="hovers-right" style="width:150px; height:150px; background:blue; text-align:center; color:white; font-weight:bold; font-size:{{#expr:16 * 10}}px; display:flex; align-items:center; justify-content:center;"><!--
--><span style="font-size:14px;">font-size:{{#expr:16 * 10}}px</span>
</div>
<div class="hovers-right" style="width:150px; height:150px; line-height:14px; background:#ccc; text-align:center; color:white; font-weight:bold; font-size:{{#expr:16 * 100}}px; display:flex; align-items:center; justify-content:center;" ><!--
--><span style="font-size:14px;">font-size:{{#expr:16 * 100}}px</span>
</div>

font-size:160px

font-size:1600px

示例4

<div class="hovers-blur hovers-bob" style="width:100px; line-height:100px; background:blue; text-align:center; color:white; font-weight:bold;">Blue</div>

Blue

示例5

背景类的html标签结构必须如下，文字内容容器要添加hovers-content类，若同时添加center，则应用内容居中。

<div class="hovers-radial-out" style="background:#eee"><!--   hover效果中的背景颜色由最外层容器的background决定
-->[[file:立绘·吕布.png|120px|link=]]<!--
--><div class="hovers-content center">{{color|#666|'''[[咸将/吕布|吕布]]'''}}</div><!-- 也可以对文字内容容器添加背景或其他样式 -->
</div>

吕布

示例6

<div class="hovers-ripple-out" style="border-color:#666"><!-- 动画中的边框颜色由border-color控制
-->[[file:立绘·吕布.png|120px|link=]]<!--
--></div>

效果展示

固定效果

fade

fade-deep

fade-shallow

bloom

bloom-deep

bloom-shallow

grow

grow-deep

grow-shallow

shrink

shrink-deep

shrink-shallow

shake

bounce

pulse-grow

pulse-shrink

push

pop

bounce-in

bounce-out

tilt

grow-rotate

float

sink

bob

hang

skew

skew-forward

skew-backward

swing

wobble-vertical

wobble-horizontal

wobble-to-bottom-right

wobble-to-top-right

wobble-top

wobble-bottom

wobble-skew

buzz

buzz-out

forward

backward

rotate

rotate-reverse

rotate-shrink

rotate-shrink-reverse

可变效果

shake-flexible

bounce-flexible

top

left

bottom

right

滤镜效果

blur

brightness

contrast

grayscale

invert

saturate

sepia

hue-rotate

blur-reverse

brightness-reverse

contrast-reverse

grayscale-reverse

invert-reverse

saturate-reverse

sepia-reverse

hue-rotate-reverse

背景滑动

sweep-to-right

sweep-to-left

sweep-to-bottom

sweep-to-top

radial-out

radial-in

边框效果

border

trim

ripple-out

ripple-in

reveal

round-corners

参见

帮助:Hovers

WIKI功能

目录

介绍

用法

hover状态切换

交替

遥控

标签栏

翻转切换

效果介绍

固定效果

滤镜类

背景类

边框类

可变效果

位置移动类

边框类

示例

示例1

示例2

示例3

示例4

示例5

示例6

效果展示

固定效果

可变效果

滤镜效果

背景滑动

边框效果

参见