簡單的CSS3鼠標滑過圖片標題和遮罩層動畫特效

此文轉自：http://www.cnblogs.com/w2bc/p/5735300.html，僅供本人學習參考，版權歸原做者全部！

 

這是一款使用CSS3製做的簡單的鼠標滑過圖片標題和遮罩層動畫特效。該鼠標滑過特效經過 CSS3transitions 和 transform 屬性，在鼠標滑過圖片時製做遮罩層和圖片標題動畫效果。

在線預覽    源碼下載

 使用方法

 HTML結構

該鼠標滑過圖片特效的HTML結構很是簡單：使用一個<div>元素做爲圖片遮罩層，在裏面放置圖片的描述信息。

1 2 3 4 5 6 7 8

< img  src = "img/01.jpg"  alt = "" > < div  class = "caption" >    < div  class = "blur" ></ div >    < div  class = "caption-text" >      < h1 >圖片標題</ h1 >      < p >描述信息</ p >    </ div > </ div >

 CSS樣式

第一個DEMO使用透明度opacity屬性來製做遮罩層的導入效果，並經過transition來製做平滑過渡動畫。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

.caption-style -1  li{    float : left ;    padding : 0px ;    position : relative ;    overflow : hidden ; }   .caption-style -1  li:hover . caption {    opacity: 1 ;   } .caption-style -1  img{    margin : 0px ;    padding : 0px ;    float : left ;    z-index : 4 ; }     .caption-style -1  . caption {    cursor : pointer ;    position : absolute ;    opacity: 0 ;    -webkit-transition: all  0.45 s ease-in-out;    -moz-transition: all  0.45 s ease-in-out;    -o-transition: all  0.45 s ease-in-out;    -ms-transition: all  0.45 s ease-in-out;    transition: all  0.45 s ease-in-out;   } .caption-style -1  .blur{    background-color : rgba( 0 , 0 , 0 , 0.65 );    height : 300px ;    width : 400px ;    z-index : 5 ;    position : absolute ; }   .caption-style -1  .caption-text h 1 {    text-transform : uppercase ;    font-size : 24px ; } .caption-style -1  .caption-text{    z-index : 10 ;    color : #fff ;    position : absolute ;    width : 400px ;    height : 300px ;    text-align : center ;    top : 100px ; }

其它效果的製做也很是簡單，具體請參考下載的源文件。

在線預覽    源碼下載