图片玻璃光影效果制作

一种图片玻璃光影效果，可用于Logo等图片，效果还是比较好看一点
图片链接地址，点击查看(https://img-blog.csdnimg.cn/20191104135152413.gif)

html代码

<div id="guang">
        <a href=""><img src="cs.jpg" alt="一张测试图片而已"/></a>
 </div>

css代码

*{margin:0;padding:0;}
    #guang{
        width:400px;height:225px;
        margin:100px auto 0 auto;
        position: relative;
    }
    #guang::before{
        content:'';
        display:block;
        background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%);
        position:absolute;
        top:0;
        left:-170px;
        width:100px;height:100%;
        transform: skewX(-30deg);
    }
    #guang:hover::before{left:470px;transition:.8s;}

其中有一个知识点需要注意：css3中的过渡时间transition加到需要过渡元素和加到需要过渡元素鼠标经过上，有什么区别？