一道白光滑过

最新推荐文章于 2020-05-20 10:51:01 发布

黄铜渣渣

最新推荐文章于 2020-05-20 10:51:01 发布

阅读量270

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/u014330950/article/details/76151988

版权

css 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.inner-img{cursor: pointer;overflow: hidden;position:relative;}
.inner-img a{display:block;}

.inner-img:before{ 
           content: "";
            position: absolute;
            overflow: hidden;
            background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
            background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
            background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
            background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
            -webkit-transform: skewX(-25deg);
            -moz-transform: skewX(-25deg);
}
.inner-img:before {
    width: 50px;
    height: 350px;
    top: -100px;
    left: -150px;
}
.inner-img:hover::before{
             -webkit-transition: left .8s;
            -moz-transition: left .8s;
            transition: left .8s;
            left:300px;
}
</style>
</head>

<body>
<div class="inner-img">
                                <a href="http://www.hbhro.com/sjzrencaicheng/" target="_blank"><img src="http://code.hbhro.com/hebjob/com/rencaicheng_latest.jpg" width="238" height="169" alt=""></a>
                            </div>
</body>
</html>