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