这个 CSS3 的效果怎么实现呢?
HTML 设计成这样:
1 | < p class = "overimg" > |
2 | < a >< img src = "http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg" ></ a > |
3 | < i class = "light" ></ i > |
4 | </ p > |
CSS 为:
01 | .overimg{ |
02 | position : relative ; |
03 | display : block ; |
04 | /* overflow: hidden; */ |
05 | box-shadow: 0 0 10px #FFF ; |
06 | } |
07 | .light{ |
08 | cursor : pointer ; |
09 | position : absolute ; |
10 | left : -180px ; |
11 | top : 0 ; |
12 | width : 180px ; |
13 | height : 90px ; |
14 | background-image : -moz-linear-gradient( 0 deg,rgba( 255 , 255 , 255 , 0 ),rgba( 255 , 255 , 255 , 0.5 ),rgba( 255 , 255 , 255 , 0 )); |
15 | background-image : -webkit-linear-gradient( 0 deg,rgba( 255 , 255 , 255 , 0 ),rgba( 255 , 255 , 255 , 0.5 ),rgba( 255 , 255 , 255 , 0 )); |
16 | transform: skewx( -25 deg); |
17 | -o-transform: skewx( -25 deg); |
18 | -moz-transform: skewx( -25 deg); |
19 | -webkit-transform: skewx( -25 deg); |
20 | |
21 | } |
22 | .overimg:hover .light{ |
23 | left : 180px ; |
24 | -moz-transition: 0.5 s; |
25 | -o-transition: 0.5 s; |
26 | -webkit-transition: 0.5 s; |
27 | transition: 0.5 s; |
28 | } |
大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。
同时在 i 层使用 cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看得到 pointer 指针。