纯CSS3实现鼠标滑过闪光(二)

演示效果：

CSS代码：

<style type="text/css">
/*基本框架CSS*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
/*基本框架CSS结束，应用特效时，以上样式可删除*/
/* 效果CSS开始 */
.brands-list { width: 480px; height: 113px; overflow: hidden; margin: 20px auto 0 auto; }
.brands-list li { float: left; width: 155px;height: 104px;overflow: hidden; margin: 0 4px 7px 0; display: inline; position: relative;}
.brands-list li img{width: 160px;height: 104px;}
.brands-list li a { position: relative; height: 104px; display: block; overflow: hidden; cursor: pointer; }
.brands-list li:after{
  background: #fff;
  content: "";
  height: 193px;   /* 修改值 */
  left: -90px;    /* 修改值 */
  opacity: .5;   /* 修改值 */
  position: absolute;
  top: -50px;
  -webkit-transform: rotate(35deg);
      -moz-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
          transform: rotate(35deg);
//cubic-bezier 可以 换成 linear、ease-in、ease-in-out (修改动画类型 记得也要修改动画时间 .55s->.2s)
  -webkit-transition: all .55s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all .55s cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: all .55s cubic-bezier(0.19, 1, 0.22, 1);
          transition: all .55s cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 999;
}
.brands-list li:hover:after{
  left: 135%; /* 修改值 */
//cubic-bezier 可以 换成 linear、ease-in、ease-in-out (修改动画类型 记得也要修改动画时间 .55s->.2s)
  -webkit-transition: all .55s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all .55s cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: all .55s cubic-bezier(0.19, 1, 0.22, 1);
          transition: all .55s cubic-bezier(0.19, 1, 0.22, 1);
} 
/* 效果CSS结束 */
</style>

HTML代码部分：

<div class="brands-list">
  <ul>
    <li>
        <a href="http://www.blogxuan.com/">
            <img src="images/01.jpg" alt="玄玄博客"/>
        </a>
    </li>
    <li>
        <a href="http://www.blogxuan.com/">
            <img src="images/02.jpg" alt="玄玄博客"/>
        </a>
    </li>
    <li>
        <a href="http://www.blogxuan.com/">
            <img src="images/03.jpg" alt="玄玄博客"/>
        </a>
    </li>
  </ul>
</div>

鼠标移入图片出现闪光就是这么简单哦！

玄玄博客：http://www.blogxuan.com/