经常上绿叶学习网的小伙伴可能都发现了,网站首页有一个非常美妙的白光闪过效果,这里我们来给大家介绍一下使用CSS3是怎么实现的。

实现代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #wrapper { position: relative; width:240px; height:180px; cursor: pointer; } #flash { position: absolute; top:0; left:-120px; width:100px; height:100%; background:-webkit-linear-gradient(left, rgba(255,255,255,0)0%, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%); transform:skewX(-30deg); } #wrapper:hover #flash { left:300px; transition:all 0.5s ease-in-out; } </style> </head> <body> <div id="wrapper"> <div id="flash"></div> <img src="img/flash.png" alt=""> </div> </body> </html>

默认情况下,预览效果如下图所示。

当鼠标移到图片上面时,会有一道白光闪过,此时预览效果如下图所示。

分析:

在上面这个例子中,我们使用transform:skewX(-30deg);定义一道平行四边形的白光,然后使用绝对定位把白光设置在图片的左边,通过控制台我们可以很直观地看出来,如下图所示。