【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>相关文章：
【CSS】如何写渐变色文字并且有打光效果
效果如上，其实核心除了渐变色文字的设置 background: linear-gradient(270deg, #d2a742 94%, #f6e2a7 25%, #d5ab4a 48%, #f6e2a7 82%, #d1a641 4%);color: #e8bb2c;background-clip: text;color: transparent;还有就是打光效果，原理其实就是两块遮罩&am…...
Android 14（API 级别 34）中，DexClassLoader 不再支持可写 dex/jar 文件
Android 14（API 级别 34）中，DexClassLoader 不再支持从可写文件加载 dex/jar 文件。这意味着从Android 14开始，你不能再使用 DexClassLoader 来动态加载位于内部存储中的dex/jar文件，除非这些文件被设置为只读。 解决…...
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.文件系统 我们使…...
原点安全荣获“AutoSec Awards 安全之星”优秀汽车数据安全合规方案奖
9月3日，「AutoSec 2024第八届中国汽车网络安全周暨第五届智能汽车数据安全展」在上海盛大开幕。本届大会由谈思实验室和谈思汽车主办、上海市车联网协会联合主办，以汽车“网络数据安全、软件安全、功能安全”为主题，汇聚了国内外的技术专家、…...
2024前端面试题分享
前言 最近忙着面试很久没有更新文章了，分享一下我收集的前端面经，当然题目仅供参考（乞求秋招offer） 面试题 响应式布局 ---根据用户的的窗口变化而变化的布局方式 react 的hooks ---官方提供的钩子和自定义的钩子…...
数学基础 -- 线性代数之正交矩阵
正交矩阵 正交矩阵是线性代数中的一个重要概念，具有许多优良的性质，在数值计算、线性变换、信号处理等领域有着广泛的应用。 1. 正交矩阵的定义 一个 n n n \times n nn 的方阵 Q Q Q 如果满足以下条件： Q T Q Q Q T I Q^T Q Q Q^T …...
PostgreSQL 17即将发布，新功能Top 3
按照计划，PostgreSQL 17 即将在 2024 年 9 月 26 日发布，目前已经发布了第一个 RC 版本，新版本的功能增强可以参考 Release Notes。 本文给大家分享其中 3 个重大的新增功能。 MERGE 语句增强 MERGE 语句是 PostgreSQL 15 增加的一个新功能…...
心觉：别再做单线程的打工人！换个思路突破
Hi，我是心觉，与你一起玩转潜意识、脑波音乐和吸引力法则，轻松搞定人生挑战，实现心中梦想！ 挑战日更写作161/1000(完整记录在下面) 公门洞开纳百川 众心逐梦越千山 号召引领潜力绽 心觉潜意识无间 想让财富翻个2倍…...
深度学习-用神经网络NN实现足球大小球数据分析软件
文章目录 前言一、 数据收集1.1特征数据收集代码实例 二、数据预处理清洗数据特征工程： 三、特征提取四、模型构建五、模型训练与评估总结 前言 预测足球比赛走地大小球（即比赛过程中进球总数是否超过某个预设值）的深度学习模型是一个复杂但有…...
linux 9系统分区扩容
1.可以看到我的是9.2的系统，系统分区：/dev/mapper/rl-root 83G 8.0G 75G 10% / 2.接下来，我们新增一块新的硬盘，而不是直接对这个硬盘的基础上再扩容。 关机，加30G硬盘，再开机 fdisk -l fdisk /dev/…...
Solidity初体验
一、概念知识 什么是智能合约？ 智能合约是仅在满足特定条件时才在区块链上部署和执行的功能，无需任何第三方参与。 由于智能合约本质上是不可变的和分布式的，因此它们在编写和部署后无法修改或更新。此外，分布式的意义在于任何…...
大模型笔记01--基于ollama和open-webui快速部署chatgpt
大模型笔记01--基于ollama和open-webui快速部署chatgpt 介绍部署&测试安装ollama运行open-webui测试 注意事项说明 介绍 近年来AI大模型得到快速发展，各种大模型如雨后春笋一样涌出，逐步融入各行各业。与之相关的各类开源大模型系统工具也得到了快速…...
html前段小知识点
1. 什么是HTML? 超文本标记语言是一种 用于创建网页的标准标记语言 HTML 文档包含了HTML 标签及文本内容 也叫文档1.什么是css？ CSS (层叠样式表），是一种用来为结构化文档添加样式的计算机语言，CSS 文件扩展名为 .css。 可以设…...
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 代码编…...
如何查看Pod的Container资源占用情况
云原生学习路线导航页（持续更新中） 方法一：直接查看pod的资源占用 kubectl top pods ${pod-name} -n ${ns} 方法二：通过运行的进程，查看pod的某个容器资源占用 1.找到pod所在node容器号：kubectl descri…...
WordPress上可以内容替换的插件
插件下载地址：WordPress内容替换插件 – 果果开发 类型 替换的类型：文章、自定义文章类型、分类、标签、媒体库、页面、评论、数据库表，不同的类型可以替换不同的字段。 替换字段 替换的字段，哪些字段内容需要替换。除了数据库…...
C++ | Leetcode C++题解之第355题设计推特
题目： 题解： class Twitter {struct Node {// 哈希表存储关注人的 Idunordered_set<int> followee;// 用链表存储 tweetIdlist<int> tweet;};// getNewsFeed 检索的推文的上限以及 tweetId 的时间戳int recentMax, time;// tweetId 对应发送…...
构建并训练卷积神经网络（CNN）对CIFAR-10数据集进行分类
深度学习实践：构建并训练卷积神经网络（CNN）对CIFAR-10数据集进行分类 引言 在计算机视觉领域中，CIFAR-10数据集是一个经典的基准数据集，广泛用于图像分类任务。本文将介绍如何使用PyTorch框架构建一个简单的卷积神经…...
flowable 根据xml 字符串生成流程图
//获取xml InputStream stream repositoryService.getProcessModel(processDefinitionId); String result IOUtils.toString(stream, StandardCharsets.UTF_8); // 创建 XMLInputFactory XMLInputFactory factory XMLInputFactory.newInstance(); // 从字符…...
AI建模——AI生成3D内容算法产品介绍与模型免费下载
说明： 记录AI文生3D模型、图生3D模型的相关产品；记录其性能、功能、收费与免费方法 0.AI建模产品 Rodin MeshAnything Meshy 生成效果比较： Rodin效果最好、Meshy其次 1.Rodin 官网：gHyperHuman 支持：文生模型、…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）
可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。 链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型（算法、数据分析、机器学习等）不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...