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

Myth丶恋晨 2022-03-12 07:27 239阅读 0赞

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

**-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%;
                }
            }

效果如下：

![20190305152726117.png][]

底图：![渐变条纹底图][20190305153022402.png]

**静态**

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

**html**

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

**css**

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

**效果**

![20190715101055548.png][]

[Link 1]: https://blog.csdn.net/YouZi_X/article/details/88180189
[20190305152726117.png]: /images/20220312/a4b39d190878427095177128683a56fd.png
[20190305153022402.png]: /images/20220312/99cecd76d61b4547aa6bf3dbcabc85d7.png
[20190715101055548.png]: /images/20220312/297687852e3d40189feeccd09006cfe4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 css边框颜色渐变

css边框颜色渐变今儿遇到了一个小小的问题—— 怎么使边框颜色渐变。天秃噜，又是一个知识盲点，不碍事，遇山开山，遇海填海。解决问题就完了。百度可真是个好东

本是古典何须时尚/ 2023年02月10日 05:30/ 0 赞/ 150 阅读

相关 css实现文字颜色渐变

.fl-left{ float:left; font-size: 46px; font-weight: 500;

布满荆棘的人生/ 2022年12月26日 10:21/ 0 赞/ 184 阅读

相关 html字体的渐变效果,神奇！js+CSS+DIV实现文字颜色渐变效果

本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果，供大家参考，具体内容如下下面是 CSS 部分代码： body\{ font:12px/1.5 Micro

约定不等于承诺〃/ 2022年10月06日 00:57/ 0 赞/ 309 阅读

相关 CSS 实现背景色渐变和文字颜色渐变

1. 背景色渐变 A . linear-gradient：用线性渐变创建图像。语法：<linear-gradient> = linear-gradient(\[ \[ [

小咪咪/ 2022年04月01日 08:38/ 0 赞/ 579 阅读

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

在[上篇][Link 1]中介绍了如何实现字体镂空效果，实现过程：裁剪字体，使字体颜色透明，添加背景图。 -webkit-background-clip: text; 动态

Myth丶恋晨/ 2022年03月12日 07:27/ 0 赞/ 240 阅读

相关 CSS文件颜色渐变

CSS样式： .general-introduction-content-item-number { background

秒速五厘米/ 2022年02月19日 04:29/ 0 赞/ 270 阅读

相关 css样式颜色渐变

style="background: linear-gradient(to right,\0CF,dodgerblue);" 这个是从左到右渐变，第一个参数是从左到右，第二个

落日映苍穹つ/ 2022年01月15日 00:27/ 0 赞/ 291 阅读

相关 CSS 背景颜色渐变

<style type="text/css"> html,body \{ margin:0px; width

水深无声/ 2021年11月29日 09:32/ 0 赞/ 401 阅读

相关 css3颜色渐变：css3如何实现背景颜色渐变？

为了开发网页的美观，css3背景颜色渐变是经常会用到的，那么，css3背景颜色渐变如何设置呢？本篇文章我们就来介绍关于css颜色渐变背景的设置方法。我们要知道的是cs...

朱雀/ 2021年01月29日 18:59/ 0 赞/ 860 阅读

相关 css如何实现网页背景动态渐变效果

linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止...

朱雀/ 2020年04月28日 06:35/ 0 赞/ 995 阅读