CSS3实现鼠标移入图片发亮效果

目前想到两个方式：

通过在里层多增加一个i标签模拟实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.imgbox{width:350px;height:350px;overflow:hidden;position:relative;margin:100px auto;}
.imgbox i {
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))
}

.imgbox:hover i {
    left: 100%;
    transition: 1s;
    -o-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s
}

</style>
</head>

<body>
    <div class="imgbox">
        <img src="img.jpg" />
        <i></i>
    </div>
</body>
</html>

二：通过伪类方式模拟，减少i标签。高级浏览器识别

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.imgbox{width:350px;height:350px;overflow:hidden;position:relative;margin:100px auto;}
.imgbox:after{
    content: "";
    display:block;
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))
}

.imgbox:hover:after{
    content: "";
    display:block;
    left: 100%;
    transition: 1s;
    -o-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s
}

</style>
</head>

<body>
    <div class="imgbox">
        <img src="img.jpg" />
    </div>
</body>
</html>

 

posted @ 2014-05-05 10:09  开水中的糖  阅读(1860)  评论(0)  编辑  收藏  举报