【CSS】如何写渐变色文字并且有打光效果

在这里插入图片描述
效果如上,其实核心除了渐变色文字的设置

 background: linear-gradient(270deg, #d2a742 94%, #f6e2a7 25%, #d5ab4a 48%, #f6e2a7 82%, #d1a641 4%);color: #e8bb2c;background-clip: text;color: transparent;

还有就是打光效果,原理其实就是两块遮罩,如下👇

在这里插入图片描述

完整代码

自己再根据自己需求调整下就行

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Draw a Ball</title><style>/* From Uiverse.io by Spacious74 */.outer {width: 300px;height: 250px;border-radius: 10px;padding: 1px;background: radial-gradient(circle 230px at 0% 0%, #ffffff, #0c0d0d);position: relative;}.card {z-index: 1;width: 100%;height: 100%;border-radius: 9px;border: solid 1px #202222;background-size: 20px 20px;/* background: radial-gradient(circle 280px at 0% 0%, #fef3ef, #0c0d0d); */background-color: #fef3ef;display: flex;align-items: center;justify-content: center;position: relative;flex-direction: column;color: #fff;}.ray {width: 200px;height: 45px;border-radius: 100px;position: absolute;background-color: red;background-color: #fff;opacity: 0.4;box-shadow: 0 0 50px #fff;filter: blur(10px);transform-origin: 10%;top: 0%;left: -54px;transform: rotate(46deg);}.ray2 {width: 200px;height: 45px;border-radius: 100px;position: absolute;background-color: red;background-color: #fff;opacity: 0.4;box-shadow: 0 0 50px #fff;filter: blur(10px);transform-origin: 10%;top: 0%;left: 54px;transform: rotate(46deg);}.card .text {font-weight: bolder;font-size: 4rem;background: linear-gradient(270deg, #d2a742 94%, #f6e2a7 25%, #d5ab4a 48%, #f6e2a7 82%, #d1a641 4%);color: #e8bb2c;background-clip: text;color: transparent;}.line {width: 100%;height: 1px;position: absolute;background-color: #2c2c2c;}</style></head><body><div class="outer"><div class="card"><div class="ray"></div><div class="ray2"></div><div class="text">No.27</div></div></div></body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7、关于LoFTR

7、关于LoFTR LoFTR论文链接&#xff1a;LoFTR LoFTR的提出&#xff0c;是将Transformer模型的注意力机制在特征匹配方向的应用&#xff0c;Transformer的提取特征的机制&#xff0c;在自身进行&#xff0c;本文提出可以的两张图像之间进行特征计算&#xff0c;非常适合进行特…

“弹性盒子”一维布局系统(补充)——WEB开发系列31

弹性盒子是一种一维布局方法&#xff0c;用于根据行或列排列元素。元素可以扩展以填补多余的空间&#xff0c;或者缩小以适应较小的空间&#xff0c;为容器中的子元素提供灵活的且一致的布局方式。 一、什么是弹性盒子&#xff1f; CSS 弹性盒子&#xff08;Flexible Box Layo…

提高开发效率的实用工具库VueUse

VueUse中文网&#xff1a;https://vueuse.nodejs.cn/ 使用方法 安装依赖包 npm i vueuse/core单页面使用&#xff08;useThrottleFn举例&#xff09; import { useThrottleFn } from "vueuse/core"; // 表单提交 const handleSubmit useThrottleFn(() > {// 具…

策略模式的小记

策略模式 策略模式支付系统【场景再现】硬编码完成不同的支付策略使用策略模式&#xff0c;对比不同&#xff08;1&#xff09;支付策略接口&#xff08;2&#xff09;具体的支付策略类&#xff08;3&#xff09;上下文&#xff08;4&#xff09;客户端&#xff08;5&#xff0…

python 交互模式怎么切换目录

假如要用交互界面调用一个.py文件&#xff1a; &#xff08;1&#xff09;用cmd界面定位到文件位置&#xff0c;如cd Desktop/data/ #进入desktop下data目录。 &#xff08;2&#xff09;接着打开python&#xff08;输入python&#xff09; 调用os &#xff08;1&#xff0…

Linux df命令详解,Linux查看磁盘使用情况

《网络安全自学教程》 df 一、字段解释二、显示单位三、汇总显示四、指定目录五、指定显示字段六、du和df结果不一样 df&#xff08;disk free&#xff09;命令用来查看系统磁盘空间使用情况。 参数&#xff1a; -h&#xff1a;&#xff08;可读性&#xff09;显示单位&#…

Mobile-Agent赛题分析和代码解读笔记(DataWhale AI夏令营)

前言 你好&#xff0c;我是GISer Liu&#xff0c;一名热爱AI技术的GIS开发者&#xff0c;本文是DataWhale 2024 AI夏令营的最后一期——Mobile-Agent赛道&#xff0c;关于赛题分析和代码解读的学习文档总结&#xff1b;这边作者也会分享自己的思路&#xff1b; 本文是对原视频的…

万象奥科参展“2024 STM32全国巡回研讨会”—深圳站、广州站

9月3日-9月5日&#xff0c;万象奥科参展“2024 STM32全国巡回研讨会”— 深圳站、广州站。此次STM32研讨会将会走进全国11个城市&#xff0c;展示STM32在智能工业、无线连接、边缘人工智能、安全、图形用户界面等领域的产品解决方案及多样化应用实例&#xff0c;深入解读最新的…

指针之旅(3)—— 指针 与 数组

目录 1. 数组名的两种意义 2. 指针访问数组&#xff08;指针也能下标引用&#xff09; 3. 一维数组传参的本质 和 sizeof在函数中失效的原因 4. 指针数组 4.1 指针数组的概念 4.2 一级指针数组 4.3 一级指针数组模拟实现二维数组 5. 数组、指针 与 字符串 6. 数组指针…

微信小程序接入客服功能

前言 用户可使用小程序客服消息功能&#xff0c;与小程序的客服人员进行沟通。客服功能主要用于在小程序内 用户与客服直接沟通用&#xff0c;本篇介绍客服功能的基础开发以及进阶功能的使用&#xff0c;另外介绍多种客服的对接方式。 更多介绍请查看客服消息使用指南 客服视…

多头切片的关键:Model 类 call解释;LlamaModel 类 call解释;多头切片的关键:cache的数据拼接

目录 Model 类 call解释 LlamaModel 类 call解释 方法签名 方法体 总结 Model 类 call解释 这段代码定义了一个特殊的方法 __call__,它是Python中的一个魔术方法(magic method),允许类的实例像函数那样被调用。在这个上下文中,这个方法很可能被定义在一个封装了某种…

【2025】公司仓库管理系统的设计与实现(公司仓库信息管理系统,仓库信息系统,管理系统,信息管理系统,货物仓管系统)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

【BIO、NIO、AIO适用场景分析】

BIO、NIO、AIO适用场景分析 1.适用场景&#xff1a;2.BIO基本介绍2.1 BIO示例 3.Java NIO基本介绍3.1 NIO中三个核心部分&#xff1a;3.2 NIO非阻塞3.3 buffer案例3.4 比较 1.适用场景&#xff1a; BIO方式适用于连接数目比较少且固定的架构&#xff0c;这种方式对服务器资源要…

Java对象拷贝的浅与深:如何选择?

在日常开发中&#xff0c;我们经常需要将一个对象的属性复制到另一个对象中。无论是使用第三方工具类还是自己手动实现&#xff0c;都会涉及到浅拷贝和深拷贝的问题。本文将深入讨论浅拷贝的潜在风险&#xff0c;并给出几种实现深拷贝的方式&#xff0c;帮助大家避免潜在的坑。…

gin 通过 OpenTelemetry 实现链路追踪

相关阅读:https://juejin.cn/post/7275550548946337829https://juejin.cn/post/7275550548946337829 OpenTelemetry 是 Cloud Native Computing Foundation (CNCF) 下的一个开源项目,旨在标准化遥测数据的生成和收集;遥测数据包括日志、指标和跟踪。 Gin 是一个用 Go (Gol…

69页PPT全面预算管理体系的框架与落地

一、明确企业战略目标企业战略目标是预算指标体系确立的根本出发点。它为预算指标的设定提供了方向和指导。 深入分析企业长期发展规划 企业需要对自身的长期发展规划进行全面、深入的分析。这包括对市场趋势、行业竞争态势、技术发展方向等外部环境因素的研究&#xff0c;以…

从API到应用:直播美颜SDK如何助力主播美颜工具开发

美颜SDK&#xff08;软件开发工具包&#xff09;作为一套强大的工具&#xff0c;能够帮助开发者快速构建美颜功能。通过集成API&#xff0c;开发者可以实现复杂的实时美颜效果&#xff0c;助力主播美颜工具的开发和应用。 一、美颜SDK的基本功能 美颜SDK是一套为开发者提供的…

【2024高教社杯全国大学生数学建模竞赛】B题模型建立求解

目录 1问题重述1.1问题背景1.2研究意义1.3具体问题 2总体分析3模型假设4符号说明&#xff08;等四问全部更新完再写&#xff09;5模型的建立与求解5.1问题一模型的建立与求解5.1.1问题的具体分析5.1.2模型的准备 目前B题第一问的详细求解过程以及对应论文部分已经完成&#xff…

中国生态环境胁迫数据(栅格/县域尺度)-为研究生态环境压力提供数据支撑

中国生态环境胁迫矢量数据&#xff08;2000-2010年&#xff09; 数据介绍 2000-2010年中国生态环境胁迫数据为2000-2010年中国范围内人口、农业生产等生态环境胁迫因子的空间分布图&#xff0c;包括人口密度、农药使用强度、化肥施用强度。数据可用于分析全国生态环境胁迫因子…

QT笔记 - QProcess读取外部程序(进程)消息

简要介绍 QProcess可用于在当前程序中启动独立的外部程序(进程)&#xff0c;并进行通讯&#xff0c;通讯原理是通过程序的输入或输出流&#xff0c;即通过c中的printf()和或c的std::cout等。 函数 void QProcess::start(const QString & program, const QStringList &am…