打开主菜单

萌娘百科 β

模板:Hovers

Template-info.svg 模板文档  [查看] [编辑] [历史] [刷新]
使用该模板需要掌握一些HTML和CSS的基础知识。


介绍

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

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

用法

{{hovers}}

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

除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-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>
Nav-Blend s.png
Nav-Blend s.png

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

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

效果介绍

固定效果

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

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

请不要在添加了position属性元素上使用移动类,除非你知道如何进行处理。如果发现效果与展示的不一致,或排版被破坏,基本上都是因为元素在其他地方添加了position属性的问题。

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


  • 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度旋转 + 小 => 正常)

滤镜类

invert-reverse外,均为触发hover效果后还原。滤镜类可以和所有其他类共用。

  • blur(高斯模糊)
  • brightness(明度50%)
  • contrast(对比度50%)
  • grayscale(转换为灰度图像)
  • invert(负片)
  • invert-reverse(hover后负片)
  • 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.625倍,在文字大小为16px时,值为10px。这会影响节点内部的文字显示,你可以在内部再添加一个标签或使用{{font}}模板来控制内部的文字大小。

请注意:chrome以及一些国产套壳浏览器字体最小值为12px,即使设置了更小的值也不会产生效果。所以为了在所有浏览器上保持效果的一致请不要设置小于12px的值。

当文字大小为12px时值为8.5px。

  • 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:16px为默认值,比例为1,例如想让边框宽度变为2倍,则设置font-size:32px,这里同样受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; line-height:150px; background:blue; text-align:center; color:white; font-weight:bold; font-size:16px;"><!--
--><span style="font-size:14px;">font-size:14px</span>
</div>
<div style="width:150px; height:150px; line-height:0; background:#ccc; text-align:center; color:white; font-weight:bold; font-size:90px; display:flex; align-items:center; justify-content:center;" class="hovers-right"><!--
--><span style="font-size:14px;">font-size:90px</span>
</div>
font-size:16px
font-size:90px

示例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标签结构必须如下,文字内容容器要添加content类,若同时添加center,则应用内容居中。

<div class="hovers-radial-out" style="background:#eee"><!--   hover效果中的背景颜色由最外层容器的background决定
--><img src="{{filepath:chimame_march2.jpg}}" style="width:150px;" /><!--
--><div class="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
可变效果

shake-flexible
bounce-flexible
top
left
bottom
right
滤镜效果

blur
brightness
contrast
grayscale
invert
invert-reverse
saturate
sepia
hue-rotate
背景滑动

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


参见