|
css特效:鼠标滑过图片出现一道闪光效果 在线特效效果地址：http://www.wd1x.com/css/canvas11.html 代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<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="http://www.wd1x.com/picture/allimg/210506/1J6392346-0.png" alt="加载中..."/>
</div>
</body>
</html>
|
