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

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

news 2026/4/9 8:26:58

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

 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】如何写渐变色文字并且有打光效果

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

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

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

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

编程日记 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日，「AutoSec 2024第八届中国汽车网络安全周暨第五届智能汽车数据安全展」在上海盛大开幕。本届大会由谈思实验室和谈思汽车主办、上海市车联网协会联合主办，以汽车“网络数据安全、软件安全、功能安全”为主题，汇聚了国内外的技术专家、…...

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

2024前端面试题分享

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

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

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

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

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

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

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

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

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

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

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

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

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

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

linux 9系统分区扩容

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

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

Solidity初体验

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

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

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

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

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

html前段小知识点

1. 什么是HTML? 超文本标记语言是一种用于创建网页的标准标记语言 HTML 文档包含了HTML 标签及文本内容也叫文档1.什么是css？ CSS (层叠样式表），是一种用来为结构化文档添加样式的计算机语言，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资源占用情况

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

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

WordPress上可以内容替换的插件

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

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

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

题目： 题解： 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数据集进行分类

深度学习实践：构建并训练卷积神经网络（CNN）对CIFAR-10数据集进行分类引言在计算机视觉领域中，CIFAR-10数据集是一个经典的基准数据集，广泛用于图像分类任务。本文将介绍如何使用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内容算法产品介绍与模型免费下载

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

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

OpenClaw+Phi-3-vision组合拳：学术论文图表自动解析方案

OpenClawPhi-3-vision组合拳：学术论文图表自动解析方案 1. 科研场景下的痛点与解决方案深夜两点，我盯着屏幕上第37篇论文的图表数据发呆——这些散落在PDF中的关键信息，需要手动转录到Excel进行统计分析。作为经常需要文献综述的科研狗&am…...

编程新知 2026/4/9 7:21:08

SOONet部署教程：解决OpenCV版本冲突与ffmpeg硬解码启用方法

SOONet部署教程：解决OpenCV版本冲突与ffmpeg硬解码启用方法 1. 项目概述与环境准备 SOONet是一个基于自然语言输入的长视频时序片段定位系统，能够通过一次网络前向计算精确定位视频中的相关片段。这个系统在处理小时级长视频时表现出色，推理…...

编程新知 2026/4/9 7:00:28

Nunchaku FLUX.1 CustomV3快速上手：5步搞定AI绘画，新手也能秒出图

Nunchaku FLUX.1 CustomV3快速上手：5步搞定AI绘画，新手也能秒出图 1. 为什么选择Nunchaku FLUX.1 CustomV3 如果你正在寻找一款既强大又易用的AI绘画工具，Nunchaku FLUX.1 CustomV3绝对值得尝试。这个定制版本在原有Nunchaku FLUX.1-dev模型…...

编程新知 2026/4/9 6:21:08

从理论到仿真：Simulink在无穷大电源与同步发电机三相短路分析中的实践

1. 电力系统短路分析的基础概念第一次接触电力系统短路分析时，我也被各种专业术语搞得一头雾水。简单来说，短路分析就是研究电力系统在发生故障时的电流变化情况。想象一下家里的电路突然短路时，保险丝会"啪"的一声跳闸&#xff0…...

编程新知 2026/4/9 5:27:59

DeepSeek-OCR-2部署教程：如何在多卡服务器上分配显存并行处理批量文档

DeepSeek-OCR-2部署教程：如何在多卡服务器上分配显存并行处理批量文档 1. 项目概述 DeepSeek-OCR-2是一个基于多模态视觉大模型的智能文档解析系统，能够将图像中的文档内容转换为结构化的Markdown格式。与传统OCR技术相比，它不仅能够识别文…...

编程新知 2026/4/9 5:05:41

如何快速掌握大规模移动应用开发：10个核心技巧与最佳实践

如何快速掌握大规模移动应用开发：10个核心技巧与最佳实践【免费下载链接】discussions Discussions about projects, technologies, and processes around building large-scale mobile apps 项目地址: https://gitcode.com/gh_mirrors/di/discussions GitH…...

编程新知 2026/4/9 4:16:24

6G八大核心关键技术汇总

6G的关键技术围绕 “极致速率、全域覆盖、智能原生、通感算智融合” 四大目标展开，是5G技术的全面革新与颠覆。以下是当前业界公认、研发最集中的八大核心技术。一、太赫兹（THz）通信 —— 超高速“高速公路”核心作用：解决5G带宽瓶…...

编程新知 2026/4/9 3:21:09

Lixie数码管驱动库深度解析：WS2812B嵌入式显示控制实践

1. Lixie 数码管驱动库技术解析：面向嵌入式工程师的深度实践指南Lixie 是一款专为驱动“Lixie 边缘导光数码管”（Edge-Lit Digit Display）设计的 Arduino 兼容库。它并非传统真空管或七段 LED，而是一种融合光学设计与现代 LED 控制…...

编程新知 2026/4/9 3:15:06

从人耳听觉到AI：为什么MFCC仍是语音识别的黄金标准？

从人耳听觉到AI：为什么MFCC仍是语音识别的黄金标准？ 想象一下，当你走进一个嘈杂的咖啡馆，背景音乐、咖啡机轰鸣、人群交谈声此起彼伏，但你依然能清晰地分辨出朋友对你说的话。这种神奇的听觉能力，正是人类进…...

编程新知 2026/4/9 2:05:57

SPI协议实战指南：从基础配置到多设备高效通信

1. SPI协议基础：从零开始理解通信机制第一次接触SPI协议时，我被它那看似简单的四线制结构迷惑了——明明只有四条线，为什么能实现高速全双工通信？后来在调试智能家居主控板时才发现，正是这种精简设计让SPI成为嵌入式领…...

编程新知 2026/4/9 1:15:17

完整代码

相关文章：