模板:Hovers
模板文檔
介紹
該模板為一個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>
示例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>
示例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>
示例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>
效果展示