CSS - 文字高光滑动效果（左侧到右侧亮光）

素颜马尾好姑娘i 2023-01-19 07:07 5阅读 0赞

## 效果图 ##

如下图所示，可自己修改文字颜色及滑动效果的颜色。  
![在这里插入图片描述][2021050811555539.gif]

## 实现代码 ##

<b class="q-loading-2-inner">自定义文字颜色及高光颜色</b>

.q-loading-2-inner { 
    
        font-weight: bold;
        /* 这里可以随意加样式 */
        
        background: #fff
            linear-gradient(
            -135deg,
            transparent 25%,
            transparent 40%,
            rgba(3,194,205,0.3) 40%,/* 这两个值是滑动条的颜色 */
            rgba(3,194,205,0.3) 60%,/* 默认是绿色 自己更改即可 */
            transparent 60%,
            transparent
            );
        background-size: 60px 60px;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: scratchy 3s linear infinite;
    }
    
    @keyframes scratchy { 
        0% { 
            background-position: -100% 0;
        }
        100% { 
            background-position: 130% 0;
        }
    }

## 完整示例 ##

全复制，新建 `index.html` ，可直接查看效果。

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>demo</title>
      <style> body{ background: black; } .q-loading-2-inner { font-weight: bold; /* 这里可以随意加样式 */ background: #fff linear-gradient( -135deg, transparent 25%, transparent 40%, rgba(3,194,205,0.3) 40%,/* 这两个值是滑动条的颜色 */ rgba(3,194,205,0.3) 60%,/* 默认是绿色 自己更改即可 */ transparent 60%, transparent ); background-size: 60px 60px; background-repeat: no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: scratchy 3s linear infinite; } @keyframes scratchy { 0% { background-position: -100% 0; } 100% { background-position: 130% 0; } } </style>
    </head>
    <body>
      <b class="q-loading-2-inner">自定义文字颜色及高光颜色</b>
    </body>
    </html>

[2021050811555539.gif]: /images/20221021/9d4a3863cefb48f08a5f04736786e50e.png