<i id='rr0ozs1c'><tr id='ocxhtc70'><dt id='xgffn7hb'><q id='zz8xs312'><span id='npsydn4o'><b id='syiy6rt3'><form id='qcu7tec8'><ins id='qjw1atsr'></ins><ul id='fvgukdaw'></ul><sub id='mf2wx63x'></sub></form><legend id='mdaxsuuw'></legend><bdo id='nxw1gsah'><pre id='osn3xe48'><center id='zldgukkc'></center></pre></bdo></b><th id='zq3yvhsh'></th></span></q></dt></tr></i><div id='1gadhhnm'><tfoot id='6v7v60v0'></tfoot><dl id='chu18cmg'><fieldset id='ad36024z'></fieldset></dl></div>
    1. <small id='1szjgd0n'></small><noframes id='9rqgyf26'>

    2. <tfoot id='rrusgy46'></tfoot>
      • <bdo id='gw04jfgd'></bdo><ul id='9ck53eoz'></ul>

        <legend id='obrsfjs5'><style id='pkk7g3em'><dir id='avg3dsiw'><q id='16wiqh8o'></q></dir></style></legend>
      1. 精准传达 • 价值共享

        洞悉互联网前沿资讯,探寻网站营销规律

        使用CSS3线性渐变实现图片闪光划过的效果

        作者: 庚午网络 | 2020-10-20 16:53 |点击:

        网站开发 网站建设 SEO 网站设计 网站首页 新网站 专业网站

      2. <small id='llbcfcuo'></small><noframes id='vpgdd3fo'>

        <tfoot id='7qqt9gio'></tfoot>

                <tbody id='j9xa2lwx'></tbody>
            • <legend id='nkq7zoho'><style id='pz232slx'><dir id='zc7yzdqm'><q id='mab6actm'></q></dir></style></legend>

                • <bdo id='3flgr6iv'></bdo><ul id='ikqlaew4'></ul>
                  <i id='ba4lqxux'><tr id='dfscunr5'><dt id='dseb1qm2'><q id='dz16e3sz'><span id='lq3l92b4'><b id='7kov68ys'><form id='7jxdgb76'><ins id='8caxdxnz'></ins><ul id='jti81gtl'></ul><sub id='11r7861a'></sub></form><legend id='0ydzebsx'></legend><bdo id='d9sj9ukl'><pre id='b8xbes99'><center id='ypb2f9ho'></center></pre></bdo></b><th id='jvgohy2f'></th></span></q></dt></tr></i><div id='lfypd4zw'><tfoot id='ox62tnb6'></tfoot><dl id='idym5ezp'><fieldset id='blvb2yg9'></fieldset></dl></div>

                  当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。于是把这个效果再实现一下。

                  大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。

                  同时在 i 层使用 cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看得到 pointer 指针。

                   

                   

                  HTML 如下:

                  <html>
                  <head></head>
                  <body>
                      <p class="overimg"> 
                          <a><img src="images/01.jpg" /></a> 
                          <i class="light"></i> 
                      </p>
                  </body>
                  </html>

                   

                  CSS 为:
                   

                  .overimg{
                      position: relative;
                      display: block;
                      /* overflow: hidden; */
                      box-shadow: 0 0 10px #FFF;
                  }
                  .light{
                      cursor:pointer;
                      position: absolute;
                      left: -180px;
                      top: 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));
                      transform: skewx(-25deg);
                      -o-transform: skewx(-25deg);
                      -moz-transform: skewx(-25deg);
                      -webkit-transform: skewx(-25deg);
                  }
                  .overimg:hover .light{
                      left:180px;
                      -moz-transition:1.5s;
                      -o-transition:1.5s;
                      -webkit-transition:1.5s;
                      transition:1.5s;
                  }

                  二度创作,如有侵权请联系删除。如没特殊注明,文章均为庚午网络原创,转载请注明https://www.hngengwu.com/wangzhanjianshezhishi/130.html

                    <small id='g4etrvyd'></small><noframes id='mcfr1fwh'>

                      <bdo id='dz9s17ef'></bdo><ul id='z7g8d928'></ul>
                      <legend id='6lpg8ty0'><style id='fo929b2j'><dir id='iu0yhycz'><q id='2668h3fy'></q></dir></style></legend>

                      <i id='bsrf6ng0'><tr id='anambz4f'><dt id='acuf7wek'><q id='d5s970lb'><span id='490h54sq'><b id='myb1051n'><form id='bhxo7kwx'><ins id='i84h1oe9'></ins><ul id='ylg287n3'></ul><sub id='u8f0puos'></sub></form><legend id='um1oidb7'></legend><bdo id='t1268ybz'><pre id='5o4ctzko'><center id='34zmhoms'></center></pre></bdo></b><th id='vwak4tyw'></th></span></q></dt></tr></i><div id='1hec9og8'><tfoot id='qq86m6aj'></tfoot><dl id='ogt98jhw'><fieldset id='pxaw6d2j'></fieldset></dl></div>
                      <tfoot id='ghkoy6x4'></tfoot>
                      多一份策划方案,总有益处。

                      请直接添加技术总监微信联系咨询

                      网站设计 品牌营销

                      多一份参考,总有益处

                      联系庚午网络,获得专属《策划方案》及报价

                      咨询相关问题或预约面谈,可以通过以下方式与我们联系

                      业务热线:18574395938 / 大客户专线:18574395938