闪光效果实现(CSS3)

作者: 被时光移动的城 | 来源:发表于2017-06-17 14:43 被阅读218次

效果：

闪光效果.gif

实现原理：
transform: skew(） + transition 实现

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                margin: 50px auto;
                width: 430px;
                height: 540px;
                background: url(../img/sg.jpg) no-repeat;
                position: relative;
                overflow: hidden;
            }
            #box #sg{
                width: 30px;
                height: 540px;
                left: -185px;
                background: linear-gradient(left,transparent,rgba(255,255,255,0.6),transparent);
                background: -moz-linear-gradient(left,transparent,rgba(255,255,255,0.6),transparent);
                position: absolute;
                transform: skew(-30deg,0);
            }
            #box:hover #sg{
                left: 585px;
                transition: left 1s;
                
            }
        </style>
    </head>
    <body>
         <div id="box">
            <div id="sg">
                
            </div>
         </div>
    </body>
</html>

如有问题欢迎交流。

如转载请注明出处，谢谢！