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

2024-04-27 14:37:01

字体：大中小

来源：转载

供稿：网友

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

在百度音乐 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>

上一篇：11款扁平化设计的 Twitter Bootstrap 主题和模板

下一篇：交互必备！国外创意的界面设计和交互动画库

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注