CSS实现网站Logo鼠标经过扫光效果

最近有位网友问我XX网站鼠标经过LOGO的时候有一道光是怎么样弄的，感觉挺不错的。那我必须安排你啊，用我的Ctrl+C大法，相关代码样式已经整理好了在下方。

html

<div class="logo on">
<a href="https://www.556z.com/"><img src="https://down.556z.com/upload/2021/08/202108301630296108969045.png" alt="556资源网"></a>
</div>

css

.logo {
height:60px;
float:left;
display:inline;
overflow:hidden;
position:relative;
z-index:99
}
.logo a {
width:100%;
height:60px;
display:table-cell;
vertical-align:middle;
transition:all ease .3s
}
.logo a img {
height:50px;
vertical-align:middle
}
.logo.on a::before {
content:'';
position:absolute;
top:0;
left:-75%;
z-index:2;
display:block;
width:50%;
height:100%;
background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0.5) 100%);
background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0.5) 100%);
-webkit-transform:skewX(-17deg);
-moz-transform:skewX(-17deg);
-o-transform:skewX(-17deg);
-ms-transform:skewX(-17deg);
transform:skewX(-17deg)
}
.logo a:hover::before {
-webkit-animation:shine 1s;
-moz-animation:shine 1s;
animation:shine 1s
}
@-webkit-keyframes shine {100% {left:125%}}
@keyframes shine {100% {left:125%}}