模板:Hovers

使用該模板需要掌握一些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>

這個用戶很笨，有重要的事情直接在討論頁告訴這個用戶~

被施加特效的元素將變為行內塊(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>

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

參見

模板:Hovers

目次

介紹

用法

hover狀態切換

效果介紹

固定效果

濾鏡類

背景類

邊框類

可變效果

示例

示例1

示例2

示例3

示例4

示例5

示例6

效果展示

參見

導覽菜單

模板:Hovers

介紹

用法

hover狀態切換

效果介紹

固定效果

濾鏡類

背景類

邊框類

可變效果

示例

示例1

示例2

示例3

示例4

示例5

示例6

效果展示

參見

導覽菜單

搜尋