線上預覽 源碼下載 這是一組使用CSS3製作的超酷滑鼠滑過圖片標題動畫特效。這組特效中共有8種不同的滑鼠滑過效果，它們都是通過CSS3 transform來製作遮罩層的各種動畫特效。 使用方法 在頁面中引入imghover.css文件。 1 <link rel="stylesheet" type=" ...
這是一組使用CSS3製作的超酷滑鼠滑過圖片標題動畫特效。這組特效中共有8種不同的滑鼠滑過效果，它們都是通過CSS3 transform來製作遮罩層的各種動畫特效。
使用方法
在頁面中引入imghover.css文件。
| 1 |
<link rel="stylesheet" type="text/css" href="css/imghover.css">>
|
HTML結構
這組滑鼠滑過圖片動畫特效的HTML結構非常簡單，如下：
| 1 2 3 4 5 6 7 |
<figure class="imghvr-book-open-horiz">
<img src="#">
<figcaption>
// 滑鼠滑過顯示的內容
</figcaption>
<a href="#"></a>
</figure>
|
CSS樣式
在figure元素上添加你想要的滑鼠滑過效果的class類即可使用這種效果。可用的class類有：
- imghvr-book-open-horiz
- imghvr-strip-shutter-right
- imghvr-throw-in-left
- imghvr-blocks-zoom-top-left
- imghvr-border-reveal-top-left
- imghvr-cube-left
- imghvr-blocks-rotate-in-left
- imghvr-dive-cc
