查看“模板:Hovers/doc”的源代码

{{FromOther/CN|site=萌娘百科|originURL=https://zh.moegirl.org.cn/{{FULLPAGENAMEE}}|origin={{FULLPAGENAME}}|copyright=cc|lsubtype=by-nc-sa|lver=3.0|contribURL=https://zh.moegirl.org.cn/index.php?title={{FULLPAGENAMEE}}&action=history}}
{{hovers}}{{info|leftimage=|color=darkorange|type=none|使用该模板需要掌握一些HTML和CSS的基础知识。}}


== 介绍 ==

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

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

== 用法 ==

<pre lang="html">
{{hovers}}
</pre>

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

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

可以理解为：

* hover状态切换的前缀为：<code>hover-</code>
* 其他效果的前缀为：<code>hovers-</code>

如将用户框模板{{tl|用户 笨蛋}}施加“振出”效果：
<pre lang="html">
<div class="hovers-buzz-out">{{用户 笨蛋}}{{clear}}<!-- clear模板消除笨蛋模板自带的浮动 --></div>
</pre>
<div class="hovers-buzz-out">{{用户 笨蛋}}{{clear}}</div>

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

在使用html标签时请注意：换行将产生额外的p标签，请在换行时使用注释<code><nowiki><!-- --></nowiki></code>。

添加<code>active</code>类将直接显示hover的效果。

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

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

<big>'''交替'''</big>

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

<pre lang="html">
<div class="hover-change">
<div class="hover-change-before">[[file:友利奈绪侧面正常.jpg|300px]]</div>
<div class="hover-change-after">[[file:友利奈绪侧面内衣.jpg|300px]]</div>
</div>
</pre>

<div class="hover-change">
<div class="hover-change-before">[[file:友利奈绪侧面正常.jpg|300px]]</div>
<div class="hover-change-after">[[file:友利奈绪侧面内衣.jpg|300px]]</div>
</div>


<big>'''遥控'''</big>
<pre lang="html">
<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>
</pre>

<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>


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

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

<big>'''标签栏'''</big>
<pre lang="html">
<!-- 由于标签栏内容为定位元素，这里需要使用外边距为其留出位置 -->
<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>
</pre>

<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>
</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制作的标签栏。在<code>hover-remote</code>外层div添加<code>hover-tab-mode</code>后，其中所有的<code>hover-remote-target</code>元素在触发hover效果时定位都会以<code>hover-tab-mode</code>的元素为基点。

<big>'''翻转切换'''</big>

<pre lang="html">
<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>
</pre>

<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}}}}
  </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不显示。

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

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

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

带有蓝色标记的动画可以与不同类的效果互相组合使用。
{{#vardefine:透明度|<sup>{{color|#5B8DD6|[透明度类]}}</sup>}}<!--
-->{{#vardefine:尺寸|<sup>{{color|#5B8DD6|[尺寸类]}}</sup>}}<!--
-->{{#vardefine:垂直移动|<sup>{{color|#5B8DD6|[垂直移动类]}}</sup>}}<!--
-->{{#vardefine:水平移动|<sup>{{color|#5B8DD6|[水平移动类]}}</sup>}}

{{ptl|define=foo|tl=<nowiki>
* {{{1}}}, {{{1}}}-deep, {{{1}}}-shallow
</nowiki>}}<!--
-->{{ptl|fade}}（正常 => 浅）{{#var:透明度}}
{{ptl|bloom}}（浅 => 正常）{{#var:透明度}}
{{ptl|grow}}（正常 => 大）{{#var:尺寸}}
{{ptl|shrink}}（小 => 正常）{{#var:尺寸}}
* shake（左右抖动）
* bounce（上下抖动）
* pulse-grow（正常 => 大【动画】）
* pulse-shrink（正常 => 小【动画】）
* push（正常 => 小）
* pop（正常 => 大）
* bounce-in（正常 => 大 => 正常 => 大）
* bounce-out（正常 => 小 => 正常 => 小）
* tilt（倾斜）
* grow-rotate（倾斜 + 放大）
* float（上移）{{#var:垂直移动}}
* sink（下移）{{#var:垂直移动}}
* 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（右移）{{#var:水平移动}}
* backward（左移）{{#var:水平移动}}
* rotate（旋转）
* rotate-reverse（逆时针旋转）
* rotate-shink（360度旋转 + 小 => 正常）

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

* 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属性<code>font-size</code>来控制幅度（也会受该值的影响，这取决于当前位置的文字大小，或是从父元素继承而来的文字大小），默认为该数值的0.0625倍，在文字大小为16px时，值为1px。

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

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

;位置移动类
* shake-flexible（左右抖动）
* bounce-flexible（上下抖动）
* top（向上移动，同float）{{#var:垂直移动}}
* left（向左移动，同backward）{{#var:水平移动}}
* bottom（向下移动，同sink）{{#var:垂直移动}}
* right（向右移动，同forward）{{#var:水平移动}}

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

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

<!--
=== 非hover动画 ===
非hover动画即应用后无需将鼠标放置在元素上，直接生效的动画。
* rotate（顺时针旋转）
* rotate-reverse（逆时针旋转）
* sway（以自身中点左右摆动）
* pulse（大小）
-->

== 示例 ==
这里默认已经使用了<code><nowiki>{{hovers}}</nowiki></code>。
=== 示例1 ===
<pre lang="html">
<div class="hovers-wobble-top" style="width:100px; line-height:100px; background:blue; text-align:center; color:white; font-weight:bold">Blue</div>
</pre>
<div style="width:100px; line-height:100px; background:blue; text-align:center; color:white; font-weight:bold"
class="hovers-wobble-top"
>Blue</div>

=== 示例2 ===
<pre lang="html">
<span class="hovers-buzz" style="font-size:26px; color:red">Sample</span>
</pre>
<span style="font-size:26px; color:red" class="hovers-buzz">Sample</span>

=== 示例3 ===
<pre lang="html">
<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>
</pre>

<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; 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 ===
<pre lang="html">
<div class="hovers-blur hovers-bob" style="width:100px; line-height:100px; background:blue; text-align:center; color:white; font-weight:bold;">Blue</div>
</pre>
<div style="width:100px; line-height:100px; background:blue; text-align:center; color:white; font-weight:bold;"
class="hovers-blur hovers-bob"
>Blue</div>

=== 示例5 ===
背景类的html标签结构必须如下，文字内容容器要添加hovers-content类，若同时添加center，则应用内容居中。
<pre lang="html">
<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>
</pre>
<div class="hovers-radial-out" style="background-color:#eee"><!--
--><img src="{{filepath:chimame_march2.jpg}}" style="width:150px;" /><!--
--><div class="hovers-content center">{{color|#666|'''[[点兔]]'''}}</div>
</div>

=== 示例6 ===
<pre lang="html">
<div class="hovers-ripple-out" style="border-color:#666"><!-- 动画中的边框颜色由border-color控制
--><img src="{{filepath:chimame_march2.jpg}}" width="150" /><!--
--></div>
</pre>
<div class="hovers-ripple-out" style="border-color:#666"><!--
--><img src="{{filepath:chimame_march2.jpg}}" width="150" /><!--
--></div>

== 效果展示 ==
{{ptl|define=foo|tl=<nowiki><div style="display:inline-block; font-size:18px; margin:5px; padding:10px; background:#eee; border:3px #ccc solid; text-align:center; color:#666; font-weight:bold;" class="hovers-{{{1}}}">{{{1}}}</div></nowiki>}}
<center style="margin-top:20px;"><big>'''固定效果'''</big></center>
{{ptl|fade}}
{{ptl|fade-deep}}
{{ptl|fade-shallow}}
{{ptl|bloom}}
{{ptl|bloom-deep}}
{{ptl|bloom-shallow}}
{{ptl|grow}}
{{ptl|grow-deep}}
{{ptl|grow-shallow}}
{{ptl|shrink}}
{{ptl|shrink-deep}}
{{ptl|shrink-shallow}}
{{ptl|shake}}
{{ptl|bounce}}
{{ptl|pulse-grow}}
{{ptl|pulse-shrink}}
{{ptl|push}}
{{ptl|pop}}
{{ptl|bounce-in}}
{{ptl|bounce-out}}
{{ptl|tilt}}
{{ptl|grow-rotate}}
{{ptl|float}}
{{ptl|sink}}
{{ptl|bob}}
{{ptl|hang}}
{{ptl|skew}}
{{ptl|skew-forward}}
{{ptl|skew-backward}}
{{ptl|swing}}
{{ptl|wobble-vertical}}
{{ptl|wobble-horizontal}}
{{ptl|wobble-to-bottom-right}}
{{ptl|wobble-to-top-right}}
{{ptl|wobble-top}}
{{ptl|wobble-bottom}}
{{ptl|wobble-skew}}
{{ptl|buzz}}
{{ptl|buzz-out}}
{{ptl|forward}}
{{ptl|backward}}
{{ptl|rotate}}
{{ptl|rotate-reverse}}
{{ptl|rotate-shrink}}
{{ptl|rotate-shrink-reverse}}
<center style="margin-top:20px;"><big>'''可变效果'''</big></center>
<hr style="margin:10px">
{{ptl|define=foo2|tl=<nowiki><div style="display:inline-flex; font-size:{{#expr:16 * 10}}px; margin:5px; padding:10px; background:#eee; border:3px #ccc solid; text-align:center; color:#666; font-weight:bold;" class="hovers-{{{1}}}"><span style="font-size:18px">{{{1}}}</span></div></nowiki>}}
{{ptl|shake-flexible}}
{{ptl|bounce-flexible}}
{{ptl|top}}
{{ptl|left}}
{{ptl|bottom}}
{{ptl|right}}
<center style="margin-top:20px;"><big>'''滤镜效果'''</big></center>
<hr style="margin:10px">
{{ptl|define=img|tl=<nowiki><div style="display:inline-block"><img src="{{filepath:chimame_march2.jpg}}" style="width:300px; margin:10px;" class="hovers-{{{1}}}" /><center>{{{1|}}}</center></div></nowiki>}}
{{ptl|blur}}
{{ptl|brightness}}
{{ptl|contrast}}
{{ptl|grayscale}}
{{ptl|invert}}
{{ptl|saturate}}
{{ptl|sepia}}
{{ptl|hue-rotate}}
{{ptl|blur-reverse}}
{{ptl|brightness-reverse}}
{{ptl|contrast-reverse}}
{{ptl|grayscale-reverse}}
{{ptl|invert-reverse}}
{{ptl|saturate-reverse}}
{{ptl|sepia-reverse}}
{{ptl|hue-rotate-reverse}}
<center style="margin-top:20px;"><big>'''背景滑动'''</big></center>
<hr style="margin:10px">
<div class="hovers-sweep-to-right" style="background-color:#eee"><!--
--><img src="{{filepath:chimame_march2.jpg}}" style="width:150px;" /><!--
--><div class="hovers-content center">{{color|#666|'''sweep-to-right'''}}</div>
</div>
<div class="hovers-sweep-to-left" style="background-color:#eee"><!--
--><img src="{{filepath:chimame_march2.jpg}}" style="width:150px;" /><!--
--><div class="hovers-content center">{{color|#666|'''sweep-to-left'''}}</div>
</div>
<div class="hovers-sweep-to-bottom" style="background-color:#eee"><!--
--><img src="{{filepath:chimame_march2.jpg}}" style="width:150px;" /><!--
--><div class="hovers-content center">{{color|#666|'''sweep-to-bottom'''}}</div>
</div>
<div class="hovers-sweep-to-top" style="background-color:#eee"><!--
--><img src="{{filepath:chimame_march2.jpg}}" style="width:150px;" /><!--
--><div class="hovers-content center">{{color|#666|'''sweep-to-top'''}}</div>
</div>
<div class="hovers-radial-out" style="background-color:#eee"><!--
--><img src="{{filepath:chimame_march2.jpg}}" style="width:150px;" /><!--
--><div class="hovers-content center">{{color|#666|'''radial-out'''}}</div>
</div>
<div class="hovers-radial-in" style="background-color:#eee"><!--
--><img src="{{filepath:chimame_march2.jpg}}" style="width:150px;" /><!--
--><div class="hovers-content center">{{color|#666|'''radial-in'''}}</div>
</div>
<center style="margin-top:20px;"><big>'''边框效果'''</big></center>
<hr style="margin:10px">
{{ptl|define=border|tl=<nowiki>
<div style="display:inline-block; margin:10px;"><!--
--><div class="hovers-{{{1|}}}" style="border-color:#666; font-size:{{{2|160}}}px;"><!--
--><img src="{{filepath:chimame_march2.jpg}}" width="150" /><!--
--></div><br /></Br><center>{{{1|}}}</center></div>
</nowiki>}}
{{ptl|border}}
{{ptl|trim}}
{{ptl|ripple-out}}
{{ptl|ripple-in}}
{{ptl|reveal}}
<div style="display:inline-block; margin:10px;"><!--
--><div class="hovers-round-corners" style="border-color:#666; font-size:480px; display:flex"><!--
--><img src="{{filepath:chimame_march2.jpg}}" width="150" /><!--
--></div><br /><center>round-corners</center></div>

<!--
<center style="margin-top:20px;"><big>'''非hover动画'''</big></center>
<hr style="margin:10px">
{{ptl|call=foo|rotate}}
{{ptl|rotate-reverse}}
{{ptl|sway}}
{{ptl|pulse}}
-->

== 参见 ==
* [[Template:Hovers/hover.css]]
* [https://ianlunn.github.io/Hover/ Hover.css官网]
* [https://www.runoob.com/cssref/css3-pr-filter.html 菜鸟教程-CSS滤镜介绍]
*[[Template:Hover]]
<includeonly>[[分类:功能模板]][[分类:辅助模板]][[分类:使用模板样式的模板]]</includeonly>
<noinclude>[[Category:模板说明文件]]</noinclude>