你的位置:首页 > 网页设计

[网页设计]CSS实现高亮光弧效果


  使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下:

代码如下:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>light</title>  <style>    body{      margin: 0;    }    a.floor{      display: block;      height: 475px;    }    a.floor:hover:before{      -webkit-transition: left 1.5s;      -moz-transition: left 1.5s;      transition: left 1.5s;      left: 920px;    }    a.floor:before{      content: "";      position: absolute;      width: 80px;      height: 475px;      top: 0;      left: -150px;      overflow: hidden;      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%);      -webkit-transform: skewX(-25deg);      -moz-transform: skewX(-25deg);    }  </style></head><body><a class="floor" href="javascript:;">  <img src="./images/girl.jpg" height="475" width="760" alt=""></a></body></html>

  存下来备用!