css特效-一道闪光在图片上划过
8/31/2015来源：CSS教程人气：824
在百度音乐 http://music.baidu.com/ 看到这么一个图片效果，当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下：大体思想是，设计一个透明层i，skewx在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。同时在 i 层使用 cursor:pointer，如果不设置这个的话，需要等透明层动画之后才能看得到 pointer 指针。打开 fireBUG 调试来看会更加清楚!
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>闪光图片</title>
- <style>
- .overimg{
- position:relative;
- display:block;
- /*overflow:hidden;*/
- box-shadow:0010px#FFF;
- }
- .light{
- cursor:pointer;
- position:absolute;
- left:-180px;
- top:0;
- width:180px;
- height:90px;
- background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
- background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
- transform:skewx(-25deg);
- -o-transform:skewx(-25deg);
- -moz-transform:skewx(-25deg);
- -webkit-transform:skewx(-25deg);
- }
- .overimg:hover.light{
- left:180px;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- transition:0.5s;
- }
- </style>
- </head>
- <body>
- <pclass="overimg">
- <a><imgsrc="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a>
- <iclass="light"></i>
- </p>
- </body>
- </html>
最新文章推荐