CSS3實現一個效果酷炫的閃光特效代碼

來源:互聯網
上載者:User
當滑鼠移上去的時候,會有一道閃光在圖片上划過,效果挺酷炫的。於是把這個效果再實現一下:
大體思想是,設計一個透明層我,skewx在X軸上做了負25度的變形,背景顏色用的是CSS3的線性漸層linear-gradient,然後hover的時候,設定0.5s的動畫時間。
同時在i層使用cursor:pointer,如果不設定這個的話,需要等透明層動畫之後才能看到
會更加清楚!

<!DOCTYPE html >      <html xmlns =“www.php.cn/1999/xhtml”>      <head>      <meta http-equiv =“Content-Type”content =“text / html; charset = utf-8”/>      <title>閃光圖片</ title>      <style>      .overimg {          位置:親戚;          顯示:塊;          / * overflow:hidden; * /          box-shadow:0 0 10px #FFF;      }      。光{          cursor:pointer;          位置:絕對          左:-180px;          頂部:0;          width:180px;          height:90px;          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));          變換:skewx(-25deg);          -o-transform:skewx(-25deg);          -moz變換:skewx(-25deg);          -webkit-transform:skewx(-25deg);             }      .overimg:hover .light {          左:180px;          -moz-transition:0.5s;          -o-transition:0.5s;          -webkit轉換:0.5s;          過渡:0.5s;      }      </ style>            </ head>      <body>      <p class =“overimg”>          <a> <img src =“www.php.cn/librarys/images/201402/2014_02_15_01.jpg”> </a>          <i class =“light”> </ i>      </ p>      </ body>      </ html>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.