- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <link rel="stylesheet" href="CSS/index.css">
- <style>
- *{
- padding: 0;
- margin: 0;
- border: none;
- }
- a{
- display: block;
- line-height: 0;
- margin: 200px auto;
- width: 200px;
- height: 200px;
- position: relative;
- }
- a:before{
- content: " ";
- position: absolute;
- left: -230px;
- width: 266px;
- top: 80px;
- height: 30px;
- background: #000;
- transform: rotate(-60deg);
- -webkit-transform: rotate(-60deg);
- background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.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,.2)),color-stop(100%,rgba(255,255,255,0)));
- background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
- background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
- }
- img{
- width: 200px;
- height: 200px;
- }
- a:hover:before{
- left: 165px;
- transition: left 1s;
- -webkit-transition: left 1s;
- }
- </style>
- </head>
- <body>
- <a href=""><img src="http://t-1.tuzhan.com/3d0e44fa7005/c-1/l/2012/09/21/15/2729ba416b0c495f9c847895388ab11c.jpg"alt=""></a>
- </body>
- </html>
来源: http://www.qdfuns.com/article/16195/4d694779e471cacea8a244780de6bc0f.html