【CSS】文字扫光 | 渐变光

码来

• 可调整角度与颜色值来改变效果

<p class="gf-gx-color">我是帅哥p>
<style>
 .gf-gx-color {
   background: -webkit-linear-gradient(135deg,
       red,
       red 25%,
       red 50%,
       #fff 55%,
       red 60%,
       red 80%,
       red 95%,
       red);
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
   -moz-background-clip: text;
   -o-background-clip: text;
   background-clip: text;
   -webkit-background-size: 200% 100%;
   -moz-background-size: 200% 100%;
   -o-background-size: 200% 100%;
   background-size: 200% 100%;
   -webkit-animation: gf-gx 4s infinite linear;
   -moz-animation: gf-gx 4s infinite linear;
   -o-animation: gf-gx 4s infinite linear;
   animation: gf-gx 4s infinite linear;
 }

 @keyframes gf-gx {
   0% {
     /* 移动背景位置 */
     background-position: 0 0;
   }

   100% {
     background-position: -400% 0;
   }
 }
style>

效果图

一束白光扫到了帅 字