php炫酷代码,CSS3实现一个效果酷炫的闪光特效代码

当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。于是把这个效果再实现一下:

大体思想是,设计一个透明层我,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。

同时在i层使用cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看到

会更加清楚!

闪光图片 title>

.overimg {

位置:亲戚;

显示:块;

/ * overflow:hidden; * /

box-shadow:0 0 10px #FFF;

}

。光{

cursor:pointer;

位置:绝对

左:-180px;

顶部: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));

变换:skewx(-25deg);

-o-transform:skewx(-25deg);

-moz变换:skewx(-25deg);

-webkit-transform:skewx(-25deg);

}

.overimg:hover .light {

左:180px;

-moz-transition:0.5s;

-o-transition:0.5s;

-webkit转换:0.5s;

过渡:0.5s;

}

style>

head>

2014_02_15_01.jpg%E2%80%9D

i>

p>

body>

html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值