线性渐变-webkit-linear-gradient

<!DOCTYPE html> <html lang="en"> <head> <script src="http://www.tianshan277.com/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
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注
  • 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!
  • U乐娱乐注册