模板:Hovers

模板： [刷新此页面] [编辑] [页面历史]
文档：[ 查看 ] [编辑] [页面历史]

说明文档

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

介绍

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

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

用法

{{hovers}}

首先需要载入该样式库，之后才能开始使用。其中规定的内容（也就是定义的类，class）必须写在HTML标签的class属性中。

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

可以理解为：

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

如将模板

测试

施加“振出”效果：

<div class="hovers-buzz-out">{{data|测试}}{{clear}}<!-- clear模板消除笨蛋模板自带的浮动 --></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|300px]]</div>
<div class="hover-change-after">[[file:食魂方形头像衬底·特殊.png|300px]]</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"> 
    {{image|图片=Nav-Blend s.png|显示类型=inline-block|resize=925|width=102.75|height=102.25|x={{#expr:112.75 * 0}}|y={{#ifeq:{{PAGENAME}}|樱之宫莓香|113.5|0}}}}
    <!-- 这里用到了一些雪碧图技术，详情可以参考template:image，普通的以[[file:]]格式引用的图片也是可以正常使用该效果的 -->
  </div>
  <div class="hover-turn-after">
    {{image|图片=Nav-Blend s.png|显示类型=inline-block|resize=925|width=102.75|height=102.25|x={{#expr:112.75 * 0}}|y=113.5}}
  </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的限制。

示例

这里默认已经使用了{{hovers}}。

示例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决定-->
{{食魂图鉴·食魂头像|食魂·测试|特殊}}<!---->
<div class="hovers-content center">{{color|#666|'''[[点兔]]'''}}</div><!-- 也可以对文字内容容器添加背景或其他样式 -->
</div>

食魂·测试

食魂

示例6

<div class="hovers-ripple-out" style="border-color:#666"><!-- 动画中的边框颜色由border-color控制-->
<!---->
</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

背景滑动

hovers-sweep-to-right	sweep-to-left	sweep-to-bottom	sweep-to-top	radial-out	radial-in
食魂·测试 sweep-to-right	食魂·测试 sweep-to-left	食魂·测试 sweep-to-bottom	食魂·测试 sweep-to-top	食魂·测试 radial-out	食魂·测试 radial-in