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

【前端设计】文字聚光灯

news 2026/3/27 10:33:57

欢迎来到前端设计专栏，本专栏收藏了一些好看且实用的前端作品，使用简单的html、css语法打造创意有趣的作品，为网站加入更多高级创意的元素。

在这里插入图片描述

案例

文字聚光灯效果可以用于网站标题
在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="聚光灯.css">
</head>
<body><div class="icon"><div class="text"><h2>星域VR</h2></div></div>
</body>
</html>

css


.icon .text {width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;
}
.icon  .text h2 {font-size: 6rem;color: #666;position: relative;color: #333;
}
.icon  .text h2::after {content: "星域VR";position: absolute;top: 0;left: 0;color: teal;clip-path: ellipse(100px 100px at 0% center);animation: animateText 5s infinite;background-image: linear-gradient(60deg, #00d0ff, #4dff03, #ff0058, #ffbc00, #ff0058);-webkit-background-clip: text;color: transparent;
}
@keyframes animateText {0%,100% {clip-path: ellipse(100px 100px at 0 center);}50% {clip-path: ellipse(100px 100px at 100% center);}
}

下期预告

加载动画

相关文章：

【前端设计】文字聚光灯

欢迎来到前端设计专栏&#xff0c;本专栏收藏了一些好看且实用的前端作品&#xff0c;使用简单的html、css语法打造创意有趣的作品&#xff0c;为网站加入更多高级创意的元素。 案例 文字聚光灯效果可以用于网站标题 html <!DOCTYPE html> <html lang"en&quo…...

编程日记 2024/1/8 18:08:17

从零开始搭建企业级前端项目模板（vue3+vite+ts）

文章目录 主要内容一、vite脚手架工具初始化项目二、项目代码加入eslint校验和自动格式化2.1安装对应依赖插件2.2 配置script脚本&#xff0c;项目安装eslint配置2.3 安装完成后&#xff0c;后面启动项目还缺少一些依赖&#xff0c;提前按需安装好 三&#xff0c;修改eslintrc.…...

编程日记 2024/1/8 18:07:16

ElasticSearch的DSL查询语法解析

Elasticsearch提供了基于ISON的DSL (Domain Specific Lanquage)来定义查询。 目录 一、常见查询类型 二、DSLQuery基本语法 三、全文检索查询 3.1 match查询&#xff1a;会对用户输入内容分词&#xff0c;常用于搜索框搜索 &#xff0c;语法&#xff1a; 3.2 multi match…...

编程日记 2024/1/8 18:06:15

Linux 常用基础命令（2024年最新篇）新手小白必看 初识Linux

CSDN 成就一亿技术人&#xff01; 2024年 借助这篇文章 重新整理Linux 基础常用命令 CSDN 成就一亿技术人&#xff01; 上命令 一 &#xff0c;Linux语法格式 学习命令要掌握命令的格式 command [options] [arguments] 命令 选项 参数 二&#xff0c;Linux基础…...

编程日记 2024/1/8 18:05:14

Golang中for和for range语句的使用技巧、对比及常见的避坑

前言 基础语法不再赘述&#xff0c;写这个原因是之前的某次面试被问道了&#xff0c;我知道会导致问题但具体答下来不是很通顺。再回想自己开发过程中&#xff0c;很多地方都是使用到了for/for range&#xff0c;但是却从没注意过一些细节&#xff0c;因此专门学习一下进行记录…...

编程日记 2024/1/8 17:59:07

Nestjs 微服务实战 - 动态微服务创建链接

所有的微服务都需要做服务治理 服务治理包括&#xff08;配置中心、服务发现、注册服务等等&#xff09;&#xff0c;常见的包括 Java 的 Nacos&#xff0c;这里不关注与服务治理&#xff0c;只说明&#xff0c;如何用 nest 网关&#xff0c;并且在网关层动态实现微服务注入 …...

编程日记 2024/1/8 17:57:05

K8S部署pod状态CreateContainerConfigError问题解决

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

编程日记 2024/1/8 17:56:03

PyTorch 简单易懂的实现 CosineSimilarity 和 PairwiseDistance - 距离度量的操作

目录 torch.nn子模块Distance Functions解析 nn.CosineSimilarity 功能 主要参数 输入和输出的形状 使用示例 nn.PairwiseDistance 功能 主要参数 输入和输出的形状 使用示例 总结 torch.nn子模块​​​​​​​Distance Functions解析 nn.CosineSimilarity torc…...

编程日记 2024/1/8 17:48:55

app加载不到aar中的so库

如何将so文件打入到aar包中 1 在main下面新建jniLibs目录并将so放进去 2 在android{}中添加 sourceSets {main {jniLibs.srcDir file(jni/)}}app引用不到aar中的so文件(巨坑&#xff0c;不去查谁知道啊) 在aar 的manifeset application标签中中添加 android:extractNativeLi…...

编程日记 2024/1/8 17:47:54

vue-springboot基于java的实验室安全考试系统

本系统为用户而设计制作实验室安全考试系统&#xff0c;旨在实现实验室安全考试智能化、现代化管理。本实验室安全考试管理自动化系统的开发和研制的最终目的是将实验室安全考试的运作模式从手工记录数据转变为网络信息查询管理&#xff0c;从而为现代管理人员的使用提供更多的…...

编程日记 2024/1/8 17:44:52

mysql+关掉密码过期

mysql关掉密码过期 要在MySQL中关闭密码过期功能&#xff0c;可以按照以下步骤进行操作&#xff1a; 登录到MySQL服务器。 使用管理员账户&#xff08;如root&#xff09;连接到数据库。 mysql -uroot -ppassword 运行以下命令来查看当前的密码过期设置&#xff1a; SHOW…...

编程日记 2024/1/8 17:42:49

实际项目中的环形缓冲区

在实际项目中&#xff0c;环形缓冲区的设计要比之前讲到的原型稍微复杂一些&#xff0c;需要一些接口函数来实现数据结构封装。GitHub上有个大帅哥写了一个轻量的环形缓冲区库&#xff0c;可以学习参考&#xff0c;也可以直接集成到自己的项目中&#xff0c;功能已经非常完善。…...

编程日记 2024/1/8 17:39:46

输出回文数-第11届蓝桥杯选拔赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第23讲。 输出回文数&#…...

编程日记 2024/1/8 17:36:44

内存溢出会导致模块测试正常，植入系统失败

前些天&#xff0c;遇到了一个问题&#xff1a;需要在系统中添加一个小功能&#xff0c;单独测试&#xff0c;然后植入系统。 代码使用了从网上下载的函数&#xff0c;模块单独运行&#xff0c;没有问题&#xff0c;但是放在系统中运行就会出问题。 不得已的情况下&#xff0c…...

编程日记 2024/1/8 17:35:43

【taro react】 ---- QRCode 二维码生成

1. 需求分析 需要将输入的值转换为图片资源；由于只是单纯的展示，所以不需要很多比如加 logo 等复杂功能；不需要后端生成，直接前端操作；使用的第三方库尽可能小，功能单一；最后选择使用 qrcode-generator 库，只有 40kb。2. 使用第三方库 qrcode-generator 3. 转换 base…...

编程日记 2024/1/8 17:34:42

rk3566 armbian修复usb2.0并挂载U盘

文章目录 usb接口修复一 执行命令二 修改rk3566-panther-x2.dts⽂件三 查看是否识别 U盘格式化、挂载一 U盘格式化1.1 查看U盘1.2 查看U盘文件系统类型1.3 格式化为ext4系统 二 挂载U盘2.1 手动挂载2.2 自动挂载&#xff08;可选&#xff09; usb接口修复 一 执行命令 将位于…...

编程日记 2024/1/8 17:32:39

猫头虎博主第9期赠书活动:《YOLO目标检测》计算机AI视觉实战YOLO人工智能目标检测与跟踪图像处理深度学习图像检测书籍

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…...

编程日记 2024/1/8 17:31:38

python 如何将英语单词翻译成中文

要将英语单词翻译成中文&#xff0c;可以使用 Python 的第三方库 googletrans。该库使用 Google Translate 提供的 API 来进行翻译。 首先&#xff0c;需要安装 googletrans 库。可以使用以下命令在终端或命令提示符中安装&#xff1a; pip install googletrans4.0.0-rc1然后…...

编程日记 2024/1/8 17:30:38

Linux_CentOS_7.9_MySQL_5.7配置数据库服务开机自启动之简易记录

前言&#xff1a; 作为运维保障&#xff0c;都无法准确预估硬件宕机的突发阶段&#xff0c;其生产数据实时在产出&#xff0c;那作为dba数据库服务的其重要性、必要性就突显而出。这里拿虚拟机试验做个配置记录&#xff0c;便于大家学习参考。 # 如出现服务器重启后登入报错无…...

编程日记 2024/1/8 17:29:36

js实现拖动盒子查看内容 内容拖动

一.分析实现过程 1.鼠标拖动的操作是&#xff0c;按下鼠标不松&#xff0c;拖动鼠标&#xff0c;就需要监听鼠标点击事件(onmousedown),鼠标拖动事件(onmousemove) 2.鼠标拖动事件的监听时机&#xff0c;是在按下鼠标之后监听的&#xff0c;所以鼠标拖动事件需要放在鼠标按下事…...

编程日记 2024/1/8 17:28:33

《先测量，再优化：写给 Python 开发者的性能实战指南——别让“聪明优化”变成昂贵自嗨》

《先测量&#xff0c;再优化&#xff1a;写给 Python 开发者的性能实战指南——别让“聪明优化”变成昂贵自嗨》 很多 Python 开发者都会经历这样一个阶段&#xff1a;项目一慢&#xff0c;第一反应就是“这段代码得优化”&#xff1b;一看到 for 循环&#xff0c;就想换成列表…...

编程新知 2026/3/27 10:17:33

Llama-3.2V-11B-cot高效部署：双卡4090下11B模型加载时间缩短至92s

Llama-3.2V-11B-cot高效部署&#xff1a;双卡4090下11B模型加载时间缩短至92s 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。该工具针对双卡RTX 4090环境进行了深度优化&#xff0c;通过一系列技术创新将11B大模型的加…...

编程新知 2026/3/27 9:43:07

vLLM-v0.17.1惊艳效果：束搜索+并行采样在长文本生成中的稳定性展示

vLLM-v0.17.1惊艳效果&#xff1a;束搜索并行采样在长文本生成中的稳定性展示 1. vLLM框架核心能力概览 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;其最新版本v0.17.1在长文本生成稳定性方面取得了显著突破。这个开源项目最初由加州大学伯克利分校…...

编程新知 2026/3/27 8:24:31

Xinference-v1.17.1智能家居控制系统开发

Xinference-v1.17.1智能家居控制系统开发 1. 智能家居控制新体验 想象一下&#xff0c;早上醒来窗帘自动拉开&#xff0c;阳光洒进房间&#xff0c;咖啡机开始工作&#xff0c;音响播放你喜欢的音乐。这不是科幻电影&#xff0c;而是用Xinference-v1.17.1构建的智能家居控制系…...

编程新知 2026/3/27 8:12:28

节能模式：OpenClaw+nanobot的间歇性任务调度技巧

节能模式&#xff1a;OpenClawnanobot的间歇性任务调度技巧 1. 为什么需要节能模式 去年夏天&#xff0c;我的电费账单突然飙升。排查后发现&#xff0c;那台24小时运行OpenClaw的工作站竟然是耗电大户——它持续调用着本地部署的Qwen大模型&#xff0c;GPU风扇昼夜不停地呼啸…...

编程新知 2026/3/27 7:34:14

Nacos集群启动时，那个神秘的cluster.conf文件到底是怎么被找到和监控的？

Nacos集群启动时cluster.conf文件的寻址与监控机制深度解析 从一次集群配置失效事件说起 上周深夜&#xff0c;我们的分布式系统监控平台突然发出警报——Nacos集群中的三个节点相继失联。紧急排查时发现&#xff0c;明明已经更新了cluster.conf文件新增了两个节点&#xff0c;…...

编程新知 2026/3/27 7:18:12

滑模控制消抖新思路：双曲正切函数VS饱和函数效果实测对比

滑模控制消抖技术深度对比&#xff1a;双曲正切函数与饱和函数的实战解析 在智能控制算法的演进历程中&#xff0c;滑模控制&#xff08;SMC&#xff09;因其强鲁棒性成为处理系统不确定性和外部干扰的利器。但传统符号函数带来的高频抖振问题&#xff0c;一直是工程师们亟待解…...

编程新知 2026/3/27 7:03:26

电商数据采集API接口||合规优先、稳定高效、数据精准

一、API 类型选型&#xff08;先选对&#xff0c;再做对&#xff09;优先按 “官方 → 第三方聚合 → 自建” 顺序选择&#xff0c;平衡合规、成本与效率&#xff1a;表格API 类型代表平台核心优势适用场景注意事项官方开放 API淘宝 TOP、京东万象、拼多多开放平台、亚马逊 SP-…...

编程新知 2026/3/27 6:37:17

PHP 数组 vs SPL 数据结构：队列与栈场景下的性能对决

PHP 数组 vs SPL 数据结构&#xff1a;队列与栈场景下的性能对决在 PHP 开发中&#xff0c;我们常常面临一个经典的选择&#xff1a;是使用灵活的原生数组&#xff08;Array&#xff09;模拟队列/栈&#xff0c;还是使用标准库&#xff08;SPL&#xff09;提供的 SplQueue 和 S…...

编程新知 2026/3/27 6:07:01

Llama-3.2V-11B-cot部署案例：中小企业低成本构建AI图文分析工作台

Llama-3.2V-11B-cot部署案例&#xff1a;中小企业低成本构建AI图文分析工作台 1. 项目概述 Llama-3.2V-11B-cot是基于Meta最新多模态大模型开发的专业级视觉推理工具&#xff0c;专为中小企业打造的低成本AI图文分析解决方案。该工具针对双卡RTX 4090环境进行了深度优化&…...

编程新知 2026/3/27 5:40:55