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

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

news 2025/6/21 9:22:28

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

 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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/6/20 12:22:01

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/6/18 11:40:55

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/6/15 16:19:15

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/6/21 2:12:34

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/6/20 23:14:34

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/6/19 6:08:24

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2025/6/15 2:57:30

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/6/17 1:30:51

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/6/19 5:57:42