css特效-一道闪光在图片上划过

8/31/2015来源:CSS教程人气:684

CSS特效-一道闪光在图片上划过

在百度音乐 http://music.baidu.com/ 看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。于是把这个效果再实现一下:大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。同时在 i 层使用 cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看得到 pointer 指针。打开 fireBUG 调试来看会更加清楚!

    1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <htmlxmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
    5. <title>闪光图片</title>
    6. <style>
    7. .overimg{
    8. position:relative;
    9. display:block;
    10. /*overflow:hidden;*/
    11. box-shadow:0010px#FFF;
    12. }
    13. .light{
    14. cursor:pointer;
    15. position:absolute;
    16. left:-180px;
    17. top:0;
    18. width:180px;
    19. height:90px;
    20. background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    21. background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    22. transform:skewx(-25deg);
    23. -o-transform:skewx(-25deg);
    24. -moz-transform:skewx(-25deg);
    25. -webkit-transform:skewx(-25deg);
    26. }
    27. .overimg:hover.light{
    28. left:180px;
    29. -moz-transition:0.5s;
    30. -o-transition:0.5s;
    31. -webkit-transition:0.5s;
    32. transition:0.5s;
    33. }
    34. </style>
    35. </head>
    36. <body>
    37. <pclass="overimg">
    38. <a><imgsrc="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a>
    39. <iclass="light"></i>
    40. </p>
    41. </body>
    42. </html>