【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 支持：文生模型、…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
使用rpicam-app通过网络流式传输视频)
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
Frozen-Flask ：将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中，push 和 present 是两种不同的视图控制器切换方式，它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
云原生周刊：k0s 成为 CNCF 沙箱项目
开源项目推荐 HAMi HAMi（原名 k8s‑vGPU‑scheduler）是一款 CNCF Sandbox 级别的开源 K8s 中间件，通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度，为容器提供统一接口，实现细粒度资源配额…...
从物理机到云原生：全面解析计算虚拟化技术的演进与应用
前言：我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM（Java Virtual Machine）让"一次编写，到处运行"成为可能。这个软件层面的虚拟化让我着迷，但直到后来接触VMware和Doc…...