模板:Hovers/doc

来自维阿百科
< 模板:Hovers
1.38>牛腩面2022年6月28日 (二) 21:45的版本 (创建页面,内容为“{{hovers}}{{info|leftimage=|color=darkorange|type=none|使用该模板需要掌握一些HTML和CSS的基础知识。}} == 介绍 == 该模板为一个hover效果的样式库,由一些常用的效果以及GitHub上的开…)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至: 导航搜索
使用该模板需要掌握一些HTML和CSS的基础知识。


介绍

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

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

用法

{{hovers}}

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

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

可以理解为:

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

如将用户框模板{{用户 笨蛋}}施加“振出”效果:

<div class="hovers-buzz-out">{{用户 笨蛋}}{{clear}}<!-- clear模板消除笨蛋模板自带的浮动 --></div>
Cirno have question.png 这个用户很,有重要的事情直接在讨论页告诉这个用户~

被施加特效的元素将变为行内块(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>
友利奈绪侧面正常.jpg
友利奈绪侧面内衣.jpg


遥控

<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-changehover-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决定
--><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>

效果展示

固定效果
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


参见