【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 支持：文生模型、…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...
uniapp中使用aixos 报错
问题： 在uniapp中使用aixos，运行后报如下错误： AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。 问题 在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈，并不断增加特征维度持续测试」的做法，体现了一种逐步建模与迭代验证的实验思路，在金融欺诈检测中非常有价值，本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
MySQL：分区的基本使用
目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区（Partitioning）是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分（分区）可以独立存储、管理和优化，…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
嵌入式常见 CPU 架构
架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集，单周期执行；低功耗、CIP 独立外设；用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel（原始…...