CSS 如何实现彩色渐变效果的文字

news2024/12/27 11:59:17

效果图如下:实现文字的字体颜色由 #ad4bd7 向 #6351fe 的颜色渐变效果。

 代码如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>css如何实现颜色渐变的字体</title>
        <style>
            .gradient-text {
                color: transparent;
                display: inline-block;
                position: relative;
                white-space: nowrap;
                font-size: 20px;
                font-weight: 600;
            }

            .gradient-text::before {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to right, #ad4bd7, #6351fe);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        </style>
    </head>
    <body>
        <p class="gradient-text" data-text="程序猿小野">程序猿小野</p>
    </body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1960497.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python 直接引用、浅拷贝、深拷贝的区别

1. 简述 简单来讲&#xff0c;直接引用所指向的地址是原对象的地址&#xff0c;深拷贝所指向的是新对象的地址&#xff0c;浅拷贝介于二者之间&#xff0c;原对象的直接子对象为新&#xff0c;子孙对象为原子孙对象。 下面用两个变量 a、b&#xff0c;一个字典对象 {‘aaa’:…

数学建模--拟合算法

目录 拟合与插值的区别 常用的拟合算法 应用实例 总结 最小二乘法在不同数据分布下的性能表现如何&#xff1f; 傅里叶级数拟合在图像处理中的应用案例有哪些&#xff1f; 贝叶斯估计法与最大似然估计法在参数估计中的优缺点分别是什么&#xff1f; 最大似然估计法&…

QT QTableView使用自定义数据模型

创建一个Qt工程-QMainWindow 添加控件 给按钮加上点击事件 创建数据结构 4.1 使用结构体或类定义自己的数据结构 4.2 声明数据结构体 #pragma once #ifndef MYDATA_H #define MYDATA_H #include<QString> struct Data {int index;QString name;QString sex; }; #endif …

auto和范围for

auto auto&#xff1a;自动推导类型功能 1.在早期 C/C 中 auto 的含义是&#xff1a;使用 auto 修饰的变量&#xff0c;是具有自动存储器的局部变量&#xff0c;后来这个 不重要了。 C11 中&#xff0c;标准委员会变废为宝赋予了 auto 全新的含义即&#xff1a; auto 不再是一…

MATLAB画散点密度图(附代码和测试数据的压缩包)

1. 有关 Matlab 获取代码关注WZZHHH回复关键词&#xff0c;或者咸鱼关注&#xff1a;WZZHHH123 怀俄明探空站数据解算PWV和Tm&#xff1a;怀俄明探空站数据解算PWV和Tm 怀俄明多线程下载探空站数据&#xff08;包括检查和下载遗漏数据的代码&#xff09;&#xff1a;怀俄明多线…

UE5 Niagara 粒子缩放—跟随物体缩放

使用Niagara粒子时&#xff0c;默认情况下&#xff0c;在世界大纲中的粒子不会随着actor的Scale缩放而改变 方法一&#xff1a;添加Scale Sprite Size 节点 方法二&#xff1a;使用 Apply Owner Scale to Attributes 节点 根据需要缩放的变量进行设置。 方法三&#xff1a;使用…

《Redis设计与实现》读书笔记-客户端

目录 1.Client简介 2.客户端属性 1&#xff09;&#xff08;本文重点&#xff09;比较通用的属性 2&#xff09;&#xff08;后续分享&#xff09;另外一类是和特定功能相关的属性 2.1套接字文件描述符 2.2名字 2.3标志&#xff08;flag&#xff09; 2.4输入缓冲区 2.…

esp-idf-v5.1.1所有官方例程讲解(esp32、esp32-C2、esp32-S3)之 a2dp_sink 详解

目录 1. 获取ESP-IDF和示例代码 2. 导航到示例代码 3. 示例代码结构 4. 关键文件解析 main.c 初始化和配置: bt_app_core.c 和 bt_app_core.h bt_app_av.c 和 bt_app_av.h A2DP事件处理: AVRCP事件处理: bt_app_sink.c 和 bt_app_sink.h 5. 编译和烧录 6. 测试…

【Linux】全志Tina etc目录下关键文件内容修改

一、文件位置 V:\f1c100s\Evenurs\f1c100s\tina\target\allwinner\c200s-F1C200s\busybox-init-base-files\etc\ssv6x5x-wifi.cfg 二、文件内容 三、介绍 在此目录下&#xff0c;可以修改在etc目录下的文件内容&#xff0c;此处举例修改一个wifi模块的配置文件数据。

探索Python的`retries`库:让代码更健壮的利器

探索Python的retries库&#xff1a;让代码更健壮的利器 背景&#xff1a;为何选择retries库&#xff1f; 在软件开发过程中&#xff0c;我们经常会遇到需要重复尝试执行某些操作的情况&#xff0c;比如网络请求、文件读写等。这些操作可能会因为各种原因暂时失败&#xff0c;但…

计算机专业,如何在大一领先其他人?关键是打破信息差!

高考录取陆续结束&#xff0c;不少同学报考计算机专业&#xff0c;然而&#xff0c;大部分人面对即将开启的计算机本科课程还是一无所知。 计算机的大学四年&#xff0c;都学些什么&#xff1f;要一直跟字符打交道吗&#xff1f;其实不然&#xff0c;编程的世界远比我们想象的…

[BJDCTF2020]EasySearch (SSI注入漏洞)

这题ctrlU发现往index.php提交数据&#xff0c;但是我目录&#xff0c;git泄露&#xff0c;sqlmap&#xff0c;爆破admin密码都没有作用&#xff0c;数据包页面也没有什么重置密码注册的功能 这种三无题多半是要拿源码做的&#xff0c;我又拿我备份文件字典扫了一下结果发现ind…

开发无人带货直播插件

在当今快速发展的电商行业中&#xff0c;直播带货已成为推动销售增长的重要力量&#xff0c;然而&#xff0c;随着直播市场的日益饱和和消费者需求的不断变化&#xff0c;如何在保持直播互动性的同时&#xff0c;实现高效、低成本的运营成为许多商家关注的焦点。 无人带货直播…

Python | Leetcode Python题解之第300题最长递增子序列

题目&#xff1a; 题解&#xff1a; class Solution:def lengthOfLIS(self, nums: List[int]) -> int:d []for n in nums:if not d or n > d[-1]:d.append(n)else:l, r 0, len(d) - 1loc rwhile l < r:mid (l r) // 2if d[mid] > n:loc midr mid - 1else:l…

c语言排序(1)

前言 排序在数据结构中占有非常重要的地位&#xff0c;我们在前面二叉树的数组实现时也用到了堆排序&#xff0c;下面我们就系统地讲一下排序。 1. 排序及其运用 1.1 什么是排序 所谓排序&#xff0c;就是使⼀串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff…

合并两个列头不同的表格

有两个Excel的"named ranges"&#xff0c;Events1和Events2。从第2行开始&#xff0c;它们都可以看做带表头的表格&#xff0c;并有部分表头相同。 Column1Column2Column3Column4DATEFIRST NAMESURNAMECODE1/2/2024JohnSmith31/2/2024LilyJJ33 Column1Column2Column…

【C++】类和对象——流插入和流提取运算符重载

目录 前言ostream和istream自定义类型的流插入重载自定义类型的流提取重载解决私有问题日期类总接口 前言 我们在上一节实现日期类时&#xff0c;在输入和输出打印时&#xff0c;经常会调用两个函数&#xff1a; void Insert()//输入函数{cin >> _year;cin >> _mo…

四款免费文案生成器app,你的文案创作神器

文案创作不仅需要创意和洞察力&#xff0c;还需要对语言的精准掌握。对于许多个人创作者和中小企业来说&#xff0c;聘请专业文案人员可能成本过高&#xff0c;而自己创作又可能面临灵感枯竭的困境。这时&#xff0c;免费的文案生成器App就显得尤为重要。免费文案生成器app的出…

Electron学习笔记(二)Hello World

目录 前言 运行主进程 创建界面 使用窗口打开界面 管理窗口的生命周期 关闭所有窗口时退出应用 (Windows & Linux)​ 如果没有窗口打开则打开一个窗口 (macOS) 使用预加载脚本访问渲染器的Node.js 添加你自己的功能 完整代码展示 效果展示 前言 接上一篇文章 …