当前位置： 首页 > news >正文

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

news 2026/1/2 6:21:10

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

 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>

相关文章：

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

效果如上&#xff0c;其实核心除了渐变色文字的设置 background: linear-gradient(270deg, #d2a742 94%, #f6e2a7 25%, #d5ab4a 48%, #f6e2a7 82%, #d1a641 4%);color: #e8bb2c;background-clip: text;color: transparent;还有就是打光效果&#xff0c;原理其实就是两块遮罩&am…...

编程日记 2024/9/6 10:10:37

Android 14（API 级别 34）中，DexClassLoader 不再支持可写 dex/jar 文件

Android 14&#xff08;API 级别 34&#xff09;中&#xff0c;DexClassLoader 不再支持从可写文件加载 dex/jar 文件。这意味着从Android 14开始&#xff0c;你不能再使用 DexClassLoader 来动态加载位于内部存储中的dex/jar文件&#xff0c;除非这些文件被设置为只读。 解决…...

编程日记 2024/9/6 10:09:35

Linux -动静态库

文章目录 1.文件系统1.1 inode1.2 硬链接定义特点使用方法 1.3软链接定义特点使用方法 2.动态库和静态库2.1动态库2.11定义与特点2.12使用方法 2.2 静态库2.21定义与特点2.22 使用方法 2.3示例2.31编写库代码2.32编译生成动态库2.33 编译生成静态库 2.4总结 1.文件系统 我们使…...

编程日记 2024/9/6 10:07:33

原点安全荣获“AutoSec Awards 安全之星”优秀汽车数据安全合规方案奖

9月3日&#xff0c;「AutoSec 2024第八届中国汽车网络安全周暨第五届智能汽车数据安全展」在上海盛大开幕。本届大会由谈思实验室和谈思汽车主办、上海市车联网协会联合主办&#xff0c;以汽车“网络数据安全、软件安全、功能安全”为主题&#xff0c;汇聚了国内外的技术专家、…...

编程日记 2024/9/6 10:06:32

2024前端面试题分享

前言 最近忙着面试很久没有更新文章了&#xff0c;分享一下我收集的前端面经&#xff0c;当然题目仅供参考&#xff08;乞求秋招offer&#xff09; 面试题 响应式布局 ---根据用户的的窗口变化而变化的布局方式 react 的hooks ---官方提供的钩子和自定义的钩子&#xf…...

编程日记 2024/9/6 10:03:28

数学基础 -- 线性代数之正交矩阵

正交矩阵 正交矩阵是线性代数中的一个重要概念&#xff0c;具有许多优良的性质&#xff0c;在数值计算、线性变换、信号处理等领域有着广泛的应用。 1. 正交矩阵的定义 一个 n n n \times n nn 的方阵 Q Q Q 如果满足以下条件&#xff1a; Q T Q Q Q T I Q^T Q Q Q^T …...

编程日记 2024/9/6 10:02:27

PostgreSQL 17即将发布，新功能Top 3

按照计划&#xff0c;PostgreSQL 17 即将在 2024 年 9 月 26 日发布&#xff0c;目前已经发布了第一个 RC 版本&#xff0c;新版本的功能增强可以参考 Release Notes。 本文给大家分享其中 3 个重大的新增功能。 MERGE 语句增强 MERGE 语句是 PostgreSQL 15 增加的一个新功能…...

编程日记 2024/9/6 10:01:25

心觉：别再做单线程的打工人！换个思路突破

Hi&#xff0c;我是心觉&#xff0c;与你一起玩转潜意识、脑波音乐和吸引力法则&#xff0c;轻松搞定人生挑战&#xff0c;实现心中梦想&#xff01; 挑战日更写作161/1000(完整记录在下面) 公门洞开纳百川 众心逐梦越千山 号召引领潜力绽 心觉潜意识无间 想让财富翻个2倍…...

编程日记 2024/9/6 9:59:24

深度学习-用神经网络NN实现足球大小球数据分析软件

文章目录 前言一、 数据收集1.1特征数据收集代码实例 二、数据预处理清洗数据特征工程&#xff1a; 三、特征提取四、模型构建五、模型训练与评估总结 前言 预测足球比赛走地大小球&#xff08;即比赛过程中进球总数是否超过某个预设值&#xff09;的深度学习模型是一个复杂但有…...

编程日记 2024/9/6 9:57:21

linux 9系统分区扩容

1.可以看到我的是9.2的系统&#xff0c;系统分区&#xff1a;/dev/mapper/rl-root 83G 8.0G 75G 10% / 2.接下来&#xff0c;我们新增一块新的硬盘&#xff0c;而不是直接对这个硬盘的基础上再扩容。 关机&#xff0c;加30G硬盘&#xff0c;再开机 fdisk -l fdisk /dev/…...

编程日记 2024/9/6 9:54:18

Solidity初体验

一、概念知识 什么是智能合约&#xff1f; 智能合约是仅在满足特定条件时才在区块链上部署和执行的功能&#xff0c;无需任何第三方参与。 由于智能合约本质上是不可变的和分布式的&#xff0c;因此它们在编写和部署后无法修改或更新。此外&#xff0c;分布式的意义在于任何…...

编程日记 2024/9/6 9:51:15

大模型笔记01--基于ollama和open-webui快速部署chatgpt

大模型笔记01--基于ollama和open-webui快速部署chatgpt 介绍部署&测试安装ollama运行open-webui测试 注意事项说明 介绍 近年来AI大模型得到快速发展&#xff0c;各种大模型如雨后春笋一样涌出&#xff0c;逐步融入各行各业。与之相关的各类开源大模型系统工具也得到了快速…...

编程日记 2024/9/6 9:48:12

html前段小知识点

1. 什么是HTML? 超文本标记语言是一种 用于创建网页的标准标记语言 HTML 文档包含了HTML 标签及文本内容 也叫文档1.什么是css&#xff1f; CSS (层叠样式表&#xff09;&#xff0c;是一种用来为结构化文档添加样式的计算机语言&#xff0c;CSS 文件扩展名为 .css。 可以设…...

编程日记 2024/9/6 9:41:04

AD7606工作原理以及FPGA控制验证（串行和并行模式）

文章目录 一、AD7606介绍二、AD7606采集原理2.1 AD7606功能框图2.2 AD7606管脚说明 三、AD7606并行模式时序分析以及实现3.1 并行模式时序图3.2 并行模式时序要求3.3 代码编写3.4 仿真观察 四、AD7606串行模式时序分析以及实现4.1 串行模式时序图4.2 串行模式时序要求4.3 代码编…...

编程日记 2024/9/6 9:39:02

如何查看Pod的Container资源占用情况

云原生学习路线导航页&#xff08;持续更新中&#xff09; 方法一&#xff1a;直接查看pod的资源占用 kubectl top pods ${pod-name} -n ${ns} 方法二&#xff1a;通过运行的进程&#xff0c;查看pod的某个容器资源占用 1.找到pod所在node容器号&#xff1a;kubectl descri…...

编程日记 2024/9/6 9:37:00

WordPress上可以内容替换的插件

插件下载地址&#xff1a;WordPress内容替换插件 – 果果开发 类型 替换的类型&#xff1a;文章、自定义文章类型、分类、标签、媒体库、页面、评论、数据库表&#xff0c;不同的类型可以替换不同的字段。 替换字段 替换的字段&#xff0c;哪些字段内容需要替换。除了数据库…...

编程日记 2024/9/6 9:34:58

C++ | Leetcode C++题解之第355题设计推特

题目&#xff1a; 题解&#xff1a; class Twitter {struct Node {// 哈希表存储关注人的 Idunordered_set<int> followee;// 用链表存储 tweetIdlist<int> tweet;};// getNewsFeed 检索的推文的上限以及 tweetId 的时间戳int recentMax, time;// tweetId 对应发送…...

编程日记 2024/9/6 9:33:57

构建并训练卷积神经网络（CNN）对CIFAR-10数据集进行分类

深度学习实践&#xff1a;构建并训练卷积神经网络&#xff08;CNN&#xff09;对CIFAR-10数据集进行分类 引言 在计算机视觉领域中&#xff0c;CIFAR-10数据集是一个经典的基准数据集&#xff0c;广泛用于图像分类任务。本文将介绍如何使用PyTorch框架构建一个简单的卷积神经…...

编程日记 2024/9/6 9:32:56

flowable 根据xml 字符串生成流程图

//获取xml InputStream stream repositoryService.getProcessModel(processDefinitionId); String result IOUtils.toString(stream, StandardCharsets.UTF_8); // 创建 XMLInputFactory XMLInputFactory factory XMLInputFactory.newInstance(); // 从字符…...

编程日记 2024/9/6 9:31:54

AI建模——AI生成3D内容算法产品介绍与模型免费下载

说明&#xff1a; 记录AI文生3D模型、图生3D模型的相关产品&#xff1b;记录其性能、功能、收费与免费方法 0.AI建模产品 Rodin MeshAnything Meshy 生成效果比较&#xff1a; Rodin效果最好、Meshy其次 1.Rodin 官网&#xff1a;gHyperHuman 支持&#xff1a;文生模型、…...

编程日记 2024/9/6 9:29:52

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/12/28 0:07:12

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/2 4:30:33

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/12/31 7:44:42

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/12/31 7:45:32

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/12/15 0:46:10

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2025/12/31 14:28:58

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/12/25 4:05:41

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57