CSS3鼠标悬停图片时镜面白光闪过

夏末_阳光依然耀眼

于 2016-08-23 10:01:50 发布

阅读量3.2k

点赞数

分类专栏： div+css html5+css3 文章标签： css3 html5

div+css 同时被 2 个专栏收录

89 篇文章 0 订阅

订阅专栏

html5+css3

25 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>闪光图片</title>
<style>
*{ margin:0; padding:0;}
.box{
	position: relative;
	box-shadow: 0 0 10px #FFF;
}
em{
	position: absolute;
	left: -180px;
	top: 0;
	width: 180px;
	height: 110px;
	background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
	background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
	transform: skewx(-25deg);
	-o-transform: skewx(-25deg);
	-moz-transform: skewx(-25deg);
	-webkit-transform: skewx(-25deg);
}
.box:hover em{
	left:180px;
	-moz-transition:0.5s;
	-o-transition:0.5s;
	-webkit-transition:0.5s;
	transition:0.5s;
}
</style>
</head>
<body>
    <div class="box">
        <a href="#"><img src="http://ww3.sinaimg.cn/large/6b002b97gw1esbsin2dhcj205002uglf.jpg"></a>
        <em></em>
    </div>
</body>
</html>