css实现字幕动态和静态颜色渐变效果

在上篇中介绍了如何实现字体镂空效果，实现过程：裁剪字体，使字体颜色透明，添加背景图。

-webkit-background-clip: text;

动态

裁剪字体，移动背景图达到效果。

    .label {
            font-size: 2.2rem;
            background: url("./img/2.png");//根据底图大小情况，决定是否添加no-repeat
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: moveBg 30s linear infinite;
        }

        @keyframes moveBg {
            0% {
                background-position: 0% 30%;
            }

            100% {
                background-position: 1000% 500%;
            }
        }

 

效果如下：

底图：

 

静态

裁剪字体，改变背景色达到效果。

html

<span class="subtitle">静态字幕颜色渐变<span>

css

.subtitle{
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    color: transparent;
}

效果