置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:Hovers/doc

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋
使用該模板需要掌握一些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>
Nav-Blend s.png
Nav-Blend s.png

該效果比較適合在兩張規格相同的圖片中進行切換,需要手動設置容器寬高,否則默認為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


參見