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

【前端设计】文字聚光灯

news 文章来源：https://blog.csdn.net/weixin_55939638/article/details/135441209 2024/10/25 0:33:39

欢迎来到前端设计专栏，本专栏收藏了一些好看且实用的前端作品，使用简单的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

[C#]winform利用seetaface6实现C#人脸检测活体检测口罩检测年龄预测性别判断眼睛状态检测

【官方框架地址】 https://github.com/ViewFaceCore/ViewFaceCore 【算法介绍】 SeetaFace6是由中国科技公司自主研发的一款人脸识别技术&#xff0c;它基于深度学习算法&#xff0c;能够快速、准确地识别出人脸&#xff0c;并且支持多种应用场景&#xff0c;如门禁系统、移动…...

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

c++ execl 执行 重定向

#include <unistd.h>int main() {pid_t childPid fork(); // 创建子进程if (childPid 0) {// 子进程// 关闭标准输入、输出和错误流close(STDIN_FILENO);close(STDOUT_FILENO);close(STDERR_FILENO);// 打开要写入的文件int fd open("output.txt", O_WRONLY…...

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

uni-app中实现元素拖动

uni-app中实现元素拖动 1、代码示例 <template><movable-area class"music-layout"><movable-view class"img-layout" :x"x" :y"y" direction"all"><img :src"musicDetail.bgUrl" :class&…...

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

Java系列-Class.forName和ClassLoader.loadClass的区别

Class.forName 和 ClassLoader.loadClass 是 Java 中两种加载类的方式&#xff0c;它们的主要区别在于加载类的时机和对异常的处理。 1.Class.forName Class.forName 是一个静态方法&#xff0c;用于在运行时加载类。它返回一个 Class 对象&#xff0c;但在加载类的过程中&am…...

编程日记 2024/1/8 17:22:27

找不到模块 “path“ 或其相对应的类型声明

src别名的配置 在开发项目的时候文件与文件关系可能很复杂&#xff0c;因此我们需要给src文件夹配置一个别名 // vite.config.ts import {defineConfig} from vite import vue from vitejs/plugin-vue import path from path export default defineConfig({plugins: [vue()],r…...

编程日记 2024/1/8 17:21:26

Linux第17步_安装SSH服务

secure shell protocol简称SSH。 目的&#xff1a;在进行数据传输之前&#xff0c;SSH先对联级数据包通过加密技术进行加密处理&#xff0c;然后再进行数据传输&#xff0c;确保数据传输安全。 1、在安装前&#xff0c;要检查虚拟机可以上网&#xff0c;否则可能会导致安装失…...

编程日记 2024/1/8 17:19:24

C语言—数据类型

变量和基本数据类型 变量类型的概念 变量是在程序中可以发生变化的量&#xff0c;变量是有类型的&#xff0c;变量的类型决定了变量存储空间的大小以及如何解释存储的位模式。 1字节&#xff08;Byte&#xff09;8位&#xff08;bit&#xff09; 定义格式 存储类型 数据…...

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

静态网页设计——多彩贵州（HTML+CSS+JavaScript）(dw、sublime Text、webstorm、HBuilder X)

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 感谢大佬的视频&#xff1a;https://www.bilibili.com/video/BV1cK411v7R2/?vd_source5f425e0074a7f92921f53ab87712357b 源码&#xff1a;https://space.bilibili.com…...

编程日记 2024/1/8 17:16:21

unity PDFRender Curved UI3.3

【PDF】PDFRender 链接&#xff1a;https://pan.baidu.com/s/1wSlmfiWTAHZKqEESxuMH6Q 提取码&#xff1a;csdn 【曲面ui】 Curved UI3.3 链接&#xff1a;https://pan.baidu.com/s/1uNZySJTW0-pPwi2FTE6fgA 提取码&#xff1a;csdn...

编程日记 2024/1/8 17:15:20

基于深度学习的停车位关键点检测系统（代码+原理）

摘要&#xff1a; DMPR-PS是一种基于深度学习的停车位检测系统&#xff0c;旨在实时监测和识别停车场中的停车位。该系统利用图像处理和分析技术&#xff0c;通过摄像头获取停车场的实时图像&#xff0c;并自动检测停车位的位置和状态。本文详细介绍了DMPR-PS系统的算法原理、…...

编程日记 2024/1/8 17:10:16

怎么给网站做seo优化/百度推广有哪些推广方式

i5 10500H 为 6 核 12 线程&#xff0c;cpu频率2.5GHz动态频 4.5GHz 选i5 10500h还是i5-1135G7 这些点重要 看过你就懂了 http://www.adiannao.cn/dy i5-1135G7 4 核 8 线程&#xff0c;主频 2.4GHz&#xff0c;睿频 4.2GHz&#xff0c;8MB 三级缓存。跑分方面&#xff0c;i5-…...

编程日记 2024/10/24 22:20:39

做网页专题 应该关注哪些网站/2345浏览器网页版

方法四让学生在课余时间制作几件固体热胀冷缩演示器&#xff0c;让学生在做实验时了解固体热胀冷缩的性质。制取方法: 取一 块100x 50X 20 (立方毫米)的小木板,在长边上做一个40~50毫米长、20 毫米宽的缺口。在木板缺口内侧插一根缝被的长针&#xff0c;使针孔一 端搭在木板上&…...

编程日记 2024/10/24 21:27:54

怎么在网站上做推广/域名停靠网页推广大全

HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web 应用开发带到了一个新的高度。该技术通过组合 HTML、CSS 和 JavaScript 可以开发出桌面应用具有的效果。尽管 HTML5 承诺很多&#xff0c;但现实中对 HTML5 支持的浏览器以及 HTML5 标准本身的完善程度都还没有…...

编程日记 2024/10/24 20:21:07

wordpress商店页面/新闻头条今日要闻10条

为什么会出现此问题呢&#xff1f;我们可以打开mysql.server脚本文件&#xff0c;里面有这样的代码&#xff1a;# If you install MySQL on some other places than /usr/local/mysql, then you# have to do one of the following things for this script to work:## - Run thi…...

编程日记 2024/10/24 19:18:07

不会写程序如何建网站/国内新闻最近新闻今天

先建一个类&#xff0c;感觉注释已经很详细了&#xff0c;有不懂的欢迎评论 using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; using System.IO; using System.Linq; using System.Web;namespace shuiyin {public class…...

编程日记 2024/10/24 17:36:48

制作企业网站页面的实训报告/南京seo网络推广

Webstorm 配置less编译的Arguments参数: $FileName$ $FileParentDir$\ccy\ccy1\ccy2\$FileNameWithoutExtension$.css --source-map 路径的根目录为本文件所在的上一层父文件 如下图所示&#xff1a; Webstorm 配置scss编译的Arguments参数&#xff08;配置的路径必须要先存在&…...

编程日记 2024/10/24 16:10:00