代码片段 1
- <!doctype html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- CSS3 流光效果
- </title>
- <style>
- body{ text-align:center; width:470px; margin:0 auto;} .overimg { margin:0
- auto; position: relative; display: block; box-shadow: 0 0 10px #FFF; }
- .light { cursor: pointer; position: absolute; left: -440px; top: 0; width:
- 400px; height: 300px; border:0px solid red; background-image: -moz-linear-gradient(0deg,
- rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)); background-image:
- -webkit-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.5),
- rgba(255,255,255,0)); transform: skewx(-25deg); -o-transform: skewx(-25deg);
- -moz-transform: skewx(-25deg); -webkit-transform: skewx(-25deg); } .overimg:hover
- .light { left: 510px; -moz-transition: 0.5s; -o-transition: 0.8s; -webkit-transition:
- 0.8s; transition: 0.8s; } h3{ color:red;}
- </style>
- </head>
- <body>
- <div class="overimg">
- <a href="JavaScript:;">
- <img src="http://www.w3cfuns.com/data/attachment/album/201408/19/004620ldgo2c49dda2h64a.jpg"
- width="400" height="300">
- <i class="light">
- </i>
- </a>
- </div>
- <h3>
- 鼠标经过图片试试!
- </h3>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/13716/4a33d916faa8a795b6ef1146b4838e86.html