线性渐变-webkit-linear-gradient - 澳门葡京官网 - 澳门葡京官网

线性渐变-webkit-linear-gradient

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="dist/js/jquery-1.11.3.js"></script>
    <style>
        .box{
            position:relative;
            display:block;
            width:600px;
            overflow: hidden;
        }
        .box:after{
            content:"";
            position:absolute;
            left:-200px;
            height:100%;
            width:30%;
            top:0;
            overflow:hidden;
            background:-webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            -webkit-transform: skewX(-25deg);
        }
        .box:hover:after{
            left: 150%;
            transition:all 1s ease ;
        }
        img{
            display:block;
            height:100%;
            width:100%;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="xxx.jpg" alt="">
</div>
</body>
</html>

版权声明:除特别注明外,本站所有文章均为澳门葡京官网原创

转载请注明:出处来自澳门葡京官网 » 线性渐变-webkit-linear-gradient

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. comprar kamagra说道:

    This is very interesting, You're a very skilled blogger.
    I have joined your feed and look forward to seeking more of your great post.

    Also, I have shared your website in my social networks!