模板:Hovers
模板文档 |
本页面之全部或部分原来自萌娘百科的模板:Hovers，依 CC BY-NC-SA 3.0 CN 授权引入；原贡献者可以在这里看到。 |
目录
介绍
该模板为一个hover效果的样式库，由一些常用的效果以及GitHub上的开源项目“Hover.css”的2D Transitions部分构成。
“hover”效果为鼠标移入元素时元素发生变化，移出时还原。
用法
{{hovers}}
首先需要载入该样式库，之后才能开始使用。其中规定的内容（也就是定义的类，class）必须写在HTML标签的class属性中。
除hover状态切换(指交替、遥控、翻转切换这三个效果)以外，其他效果hovers-前缀都是必须的，这用于与其他类区分并提供一些基础的样式。
可以理解为：
- hover状态切换的前缀为：
hover- - 其他效果的前缀为：
hovers-
如将用户框模板{{用户 笨蛋}}施加“振出”效果：
<div class="hovers-buzz-out">{{用户 笨蛋}}{{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:友利奈绪侧面正常.jpg|300px]]</div>
<div class="hover-change-after">[[file:友利奈绪侧面内衣.jpg|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>
示例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>
示例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>
示例5
背景类的html标签结构必须如下，文字内容容器要添加hovers-content类，若同时添加center，则应用内容居中。
<div class="hovers-radial-out" style="background:#eee"><!-- hover效果中的背景颜色由最外层容器的background决定
--><img src="{{filepath:chimame_march2.jpg}}" style="width:150px;" /><!--
--><div class="hovers-content center">{{color|#666|'''[[点兔]]'''}}</div><!-- 也可以对文字内容容器添加背景或其他样式 -->
</div>
示例6
<div class="hovers-ripple-out" style="border-color:#666"><!-- 动画中的边框颜色由border-color控制
--><img src="{{filepath:chimame_march2.jpg}}" width="150" /><!--
--></div>
效果展示
