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

Myth丶恋晨 2022-03-12 07:27 300阅读 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 条评论，300人围观）

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

相关阅读

相关 CSS 实现动态流光线条效果和颜色渐变效果的实现方法详解

系列文章目录 -------------------- 文章目录系列文章目录前言一、实现动态流光线条效果二、实现动态流光线条颜色渐

深碍√TFBOYSˉ_/ 2023年10月12日 23:31/ 0 赞/ 1 阅读

相关 css边框颜色渐变

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

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

相关 css实现文字颜色渐变

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

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

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

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

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

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

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

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

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

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

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

相关 CSS文件颜色渐变

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

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

相关 CSS 背景颜色渐变

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

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

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

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

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

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

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

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