经常上绿叶学习网的小伙伴可能都发现了，网站首页有一个非常美妙的白光闪过效果，这里我们来给大家介绍一下使用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);定义一道平行四边形的白光，然后使用绝对定位把白光设置在图片的左边，通过控制台我们可以很直观地看出来，如下图所示。