• <bdo id='hya31ql6'></bdo><ul id='8oftz2ij'></ul>
    <legend id='coakrf4x'><style id='0tuy2kss'><dir id='eklujnvi'><q id='rk7y94yk'></q></dir></style></legend>
  • <tfoot id='tx40shqx'></tfoot>

  • <i id='mn92ifex'><tr id='obn5j4g9'><dt id='m1uldque'><q id='guyg9vm7'><span id='2ll7y3ea'><b id='d7vjpxek'><form id='bgf6gfkd'><ins id='xaaod0zo'></ins><ul id='5ycmhoaq'></ul><sub id='98fhibnh'></sub></form><legend id='o4xio5q2'></legend><bdo id='uy7mkilz'><pre id='c5jpq3zu'><center id='b6fim104'></center></pre></bdo></b><th id='nf6khfi1'></th></span></q></dt></tr></i><div id='m2ji7q1p'><tfoot id='dnyoiy6z'></tfoot><dl id='itqbrkm1'><fieldset id='yo6jhsa6'></fieldset></dl></div>

        <small id='jimvtdms'></small><noframes id='ig8hts6e'>

        精准传达 • 价值共享

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

        利用纯CSS3让文字向右循环闪过效果

        作者: 庚午网络 | 2021-01-04 02:50 |点击:

          <legend id='wcy72v0w'><style id='z02iz2nw'><dir id='vsiabsk0'><q id='6vxr7cbc'></q></dir></style></legend>
                <bdo id='0id6xqni'></bdo><ul id='v8cqesdn'></ul>

                  <tbody id='t4c9te96'></tbody>
              • <tfoot id='reqflpx1'></tfoot>

                <small id='84s47vkf'></small><noframes id='bozjrfnj'>

                1. <i id='6u1gnnnq'><tr id='l0fw6mqo'><dt id='gib0tx7s'><q id='8524w50v'><span id='aiz2ej7z'><b id='89iazzfc'><form id='345qt4qw'><ins id='xzdutxa9'></ins><ul id='i79dq0eo'></ul><sub id='ihr0jzf3'></sub></form><legend id='20mt85wc'></legend><bdo id='15i02ipu'><pre id='rkhs4zoi'><center id='8elnv97d'></center></pre></bdo></b><th id='kmsgpp8d'></th></span></q></dt></tr></i><div id='4lfyqpv3'><tfoot id='tqfswqe2'></tfoot><dl id='r424z8x0'><fieldset id='qtjislgr'></fieldset></dl></div>

                2. 本文介绍的利用纯CSS3实现文字向右循环闪过效果的相关资料,下面话不多说,大家先来看看示例代码和效果图吧。

                  一、直接上代码!下面这是效果图:


                   

                  <!DOCTYPE html>
                  <html lang="en">
                      <head>
                          <meta charset="utf-8">
                          <style>
                              .shadow {
                                  text-align: center;
                                  /* 背景颜色线性渐变 */
                                      /* 老式写法 */
                                          /* linear为线性渐变,也可以用下面的那种写法。left top,right top指的是渐变方向,左上到右上 */
                                          /* color-stop函数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。所以本次渐变为两边灰色,中间渐白色 */
                                  background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
                                      /* 新式写法 */
                                  /* background: -webkit-linear-gradient(left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d)); */
                   
                                  /* 设置为text,意思是把文本内容之外的背景给裁剪掉 */
                                  -webkit-background-clip: text;
                                  /* 设置对象中的文字填充颜色 这里设置为透明 */
                                  -webkit-text-fill-color: transparent;
                                  /* 每隔2秒调用下面的CSS3动画 infinite属性为循环执行animate */
                                  -webkit-animation: animate 1.5s infinite;
                              }
                              /* 兼容写法,要放在@keyframes前面 */
                              @-webkit-keyframes animate {
                                  /* 背景从-100px的水平位置,移动到+100px的水平位置。如果要移动Y轴的,设置第二个数值 */
                                  from {background-position: -100px;}
                                  to {background-position: 100px;}
                              }
                              @keyframes animate {
                                  from {background-position: -100px;}
                                  to {background-position: 100px;}
                              }
                          </style>
                      </head>
                      <body>
                          <div class="shadow">文字向右闪过效果</div>
                      </body>
                  </html>

                   

                   

                  二、这个白色渐变闪过效果用CSS3做很容易也很方便,唯一不好的地方应该就是兼容问题了。所以现在一般都用在移动端上面了。

                   

                  三、来啦来啦!(敲黑板) 我觉得代码注释已经比较清楚了,所以画画重点就好了!!!

                  1、infinite     这是循环执行的属性,有了它,才能一闪一闪滴!

                  2、-webkit-text-fill-color: transparent;    文字填充颜色为透明,没有设置的话,看不出白色渐变划过效果的!

                   

                  3、-webkit-background-clip: text;          把文本内容之外的背景给裁剪掉,如果不加,文字显示不出来,只显示渐变的颜色!

                  4、color-stop() 渐变的color-stop              函数,表示渐变的位置和颜色,就是它,我们才能想在哪里渐变就哪里渐变,再让它移动起来,就出现一闪一闪的效果了!

                  四、最后,说一下思路:

                    首先,设置一个中间白色、两边灰色的渐变背景色;

                    其次,文字填充颜色设为透明(才能看到白色背景);

                    接着,把文字之外的背景色给裁剪掉(只显示文字);

                    最后,用@keyframes,让背景白色位置循环从左到右执行。

                  二度创作,如有侵权请联系删除。如没特殊注明,文章均为庚午网络原创,转载请注明https://www.hngengwu.com/gengwuwenku/661.html
                    <bdo id='oy5pv798'></bdo><ul id='p2brv1nr'></ul>

                    <legend id='vm20bfql'><style id='rczn6ls6'><dir id='ll2pyd2o'><q id='h5lwp1tp'></q></dir></style></legend>

                    <i id='r1xl1yqg'><tr id='a9g8k2sw'><dt id='14ptahir'><q id='nccklu6b'><span id='jvf3c8zq'><b id='1jvhzzi8'><form id='w00adztb'><ins id='61p1yxp0'></ins><ul id='lt42lr9j'></ul><sub id='hywzxn8z'></sub></form><legend id='qip572ms'></legend><bdo id='otjtrnbc'><pre id='8i4e7b6c'><center id='b36pt5uf'></center></pre></bdo></b><th id='j0w4hyax'></th></span></q></dt></tr></i><div id='irn96er3'><tfoot id='ui360fxy'></tfoot><dl id='q434stb3'><fieldset id='yxig9ws7'></fieldset></dl></div>

                      <small id='ooz930mb'></small><noframes id='qsm9fxva'>

                      <tfoot id='7mj8q3yx'></tfoot>
                      多一份策划方案,总有益处。

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

                      网站设计 品牌营销

                      多一份参考,总有益处

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

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

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