CSS 文字渐变滚动

最新推荐文章于 2024-07-07 21:55:16 发布

冲啊使劲冲

最新推荐文章于 2024-07-07 21:55:16 发布

阅读量552

点赞数

分类专栏：笔记文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_49279305/article/details/128334192

版权

笔记专栏收录该内容

11 篇文章 3 订阅

订阅专栏

记录一下~
渐变文字滚动通过css 动画实现
改变背景定位来实现文字的滚动跳过

HTML


<style>
  h1 {
    -webkit-animation: strip 3s linear infinite;
    background-image: -webkit-linear-gradient(left, #147b96, #e27c7c 25%, #147b96 50%, #e27c7c 75%, #147b96);
    background-image: -moz-linear-gradient(left, #147b96, #e27c7c 25%, #147b96 50%, #e27c7c 75%, #147b96);
    background-image: -ms-linear-gradient(left, #147b96, #e27c7c 25%, #147b96 50%, #e27c7c 75%, #147b96);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @keyframes strip {
    from {
      background-position: 0 0;
    }

    to {
      background-position: -100% 0;
    }
  }
</style>
<body>
  <h1>CSS文字渐变滑动</h1>
</body>