纯css创建动态文字渐变效果

锅盖哒

已于 2023-10-13 18:56:18 修改

阅读量1.4k

点赞数 1

分类专栏： HTML和CSS 文章标签： css 前端

于 2023-07-04 17:37:52 首次发布

本文链接：https://blog.csdn.net/A12536365214/article/details/131539753

版权

HTML和CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

动态效果就不放了，放两张效果不同的展示了

效果展示

首先创建html部分

      <h1 class="gradient-box"><b><strong>123123123</strong></b></h1>

控制时间的

 @keyframes gradientAnimation {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

控制样式的动画效果的


    /* 设置元素样式 */
    .gradient-box {
      width: 200px;
      height: auto;
      background: linear-gradient(90deg, red, blue,gray,#02B379);
      background-size: 200% 200%;
      animation: gradientAnimation 2s ease infinite;
      -webkit-text-fill-color: transparent;
                -webkit-background-clip:text;
               
    }

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">


  /* 创建渐变动画 */
  @keyframes gradientAnimation {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* 设置元素样式 */
    .gradient-box {
      width: 200px;
      height: auto;
      background: linear-gradient(90deg, red, blue,gray,#02B379);
      background-size: 200% 200%;
      animation: gradientAnimation 2s ease infinite;
      -webkit-text-fill-color: transparent;
                -webkit-background-clip:text;
               
    }

        </style>
    </head>
    <body>
      <h1 class="gradient-box"><b><strong>123123123</strong></b></h1>
    </body>
</html>

本篇博客结束谢谢观看