<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>╭(╯^╰)╮</title>
<style>
.container{
width: 580px;
height: 325px;
position: relative;
}
.container:hover:before{
transition: left 2s;/*過渡,改變閃光的位置*/
left: 770px;
}
.container:before{/*在圖片之前插入閃光*/
content: '';
position: absolute;
width: 100px;
height: 325px;
top: 0;
left: -190px;
overflow: hidden;
background-image: linear-gradient(to right,rgba(255,255,255,.2) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,.2) 100%);/*linear-gradient漸變效果*/
transform: skewX(-25deg);/*沿x軸傾斜*/
}
</style>
</head>
<body>
<div class="container">
<img src="yinhun.jpg" alt="加載中..."/>
</div>
</body>
</html>瀏覽器兼容自己加,-webkit-linear-gradient(to right,rgba(255,255,255,.2) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,.2) 100%)
╮(╯_╰)╭全面放棄老ie