【CSS】文字扫光 | 渐变光

最新推荐文章于 2024-07-23 18:13:59 发布

视觉CG

最新推荐文章于 2024-07-23 18:13:59 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/qq_43614372/article/details/131193093

版权

网页案列专栏收录该内容

7 篇文章 0 订阅

订阅专栏

码来

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

<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>