【前端设计】文字聚光灯

news2024/11/15 7:39:00

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

下期预告

加载动画

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1365738.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Unity组件开发--短连接HTTP

1.网络请求管理器 using LitJson; using Cysharp.Threading.Tasks; using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Networking; using UnityEngine.Events;using System.Web; using System.Text; using Sy…

SSM框架学习笔记01 | 注解开发

文章目录 1. 注解形式定义bean2.纯注解开发3.bean管理4. 依赖注入5. 第三方bean管理总结 1. 注解形式定义bean Compoenet ControllerServiceRepository 配合代码块 <context:component-scan /> 使用 2.纯注解开发 Configuration ComponentScan AnnotationConfigApplicati…

【开源】基于JAVA的教学过程管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 教师端2.2 学生端2.3 微信小程序端2.3.1 教师功能如下2.3.2 学生功能如下 三、系统展示 四、核心代码4.1 查询签到4.2 签到4.3 查询任务4.4 查询课程4.5 生成课程成绩 六、免责说明 一、摘要 1.1 项目介绍 基于JAVAVu…

国科大计算机体系结构期末考试——更新中

题型一、第二章的画图 给一个逻辑表达式&#xff0c;画出晶体管级别的电路图 cmos电路的基本电路&#xff1a; 与非门的功能是对多个输入信号进行逻辑与操作&#xff0c;然后对结果进行取反。 或非门的功能是对多个输入信号进行逻辑或操作&#xff0c;然后对结果进行取反。 …

链表:两个一组,反转链表

1、针对单链表&#xff0c;当我们进行操作时&#xff0c;如果需要进行反转或者进行其他操作时&#xff0c;有链表断开的情况&#xff0c;不妨考虑下使用辅助指针来记录断开后的链表位置&#xff0c;将需要处理的数据处理好后&#xff0c;可以使用此辅助指针找到链表的位置 #in…

服务器故障与管理口与raid

一&#xff0c;服务器常见故障 1&#xff0c;系统不停重启进入不了系统 排查是否是硬件故障&#xff0c;系统盘是否损坏&#xff08;硬盘灯红色&#xff0c;黄色&#xff0c;绿色&#xff09; 查看系统第一启动项是那种方式(硬盘 网络网卡 光驱 U盘) bios 是否双系统&#x…

使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架

使用命令行方式搭建uni-app Vue3 Typescript Pinia Vite Tailwind CSS uv-ui开发脚手架 项目代码以上传至码云&#xff0c;项目地址&#xff1a;https://gitee.com/breezefaith/uniapp-vue3-ts-scaffold 文章目录 使用命令行方式搭建uni-app Vue3 Typescript Pinia V…

C# ReaderWriterLock类学习

前言 今天这篇文章我们来学习一下ReaderWriterLock类&#xff0c;ReaderWriterLock类定义了实现单写程序和多读程序语义的锁。这个类主要用于文件操作&#xff0c;即多个线程可以读取文件&#xff0c;但只能用一个线程来更新文件。使用ReaderWriterLock类时&#xff0c;任意数…

并发(9)

目录 50.AQS的核心思想是什么&#xff1f; 51.AQS有哪些核心方法&#xff1f; 52.AQS定义什么样的资源获取方式&#xff1f; 53.AQS底层使用了什么样的设计模式&#xff1f; 54.什么是可重入&#xff0c;什么是可重入锁&#xff1f;他用来解决什么问题&#xff1f; 55.Ree…

wireshark抓包分析HTTP协议,HTTP协议执行流程,

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 使用WireShark工具抓取「HTTP协议」的数据包&#…

超自动化助力企业财务转型升级

在快节奏的财务规划与分析环境中&#xff0c;传统的预算方法虽长期以来一直是企业制定有效决策的支柱&#xff0c;但已不足以驾驭当今复杂的商业环境。不断的经济变化、市场的不确定性以及利益相关者的需求增加促使企业寻求更敏捷的解决方案。如今&#xff0c;部分企业开始尝试…

关键字、标志符、变量、基本数据类型

1、关键字 1.1、定义 定义&#xff1a;被JAVA语言赋予了特殊含义&#xff0c;用作专门用途的字符串&#xff08;或单词&#xff09; 特点&#xff1a;全部关键字都是小写字母 上源码&#xff1a; 代码中定义类的关键字class&#xff0c;定义一个订单控制器类 ​​​​​​​…

try catch 应该在 for 循环里面还是外面

正文 首先 &#xff0c; 话说在前头&#xff0c; 没有什么 在里面 好 和在外面好 或者 不好的 一说。 本篇文章内容&#xff1a; 使用场景 性能分析 个人看法 1. 使用场景 为什么要把 使用场景 摆在第一个 &#xff1f; 因为本身try catch 放在 for循环 外面 和里面 …

7N65-ASEMI高压NPN型MOS管7N65

编辑&#xff1a;ll 7N65-ASEMI高压NPN型MOS管7N65 型号&#xff1a;7N65 品牌&#xff1a;ASEMI 连续漏极电流(Id)&#xff1a;4A 漏源电压(Vdss)&#xff1a;650V 栅极阈值电压&#xff1a;30V 单脉冲雪崩能量&#xff1a;150mJ 集电极电流&#xff08;脉冲&#xff…

【分布式微服务专题】SpringSecurity快速入门

目录 前言阅读对象阅读导航前置知识笔记正文一、Spring Security介绍1.1 什么是Spring Security1.2 它是干什么的1.3 Spring Security和Shiro比较 二、快速开始2.1 用户认证2.1.1 设置用户名2.1.1.1 基于application.yml配置文件2.1.1.2 基于Java Config配置方式 2.1.2 设置加密…

初识Linux shell

Linux初探 Linux系统可以划分为4个部分&#xff1a; Linux内核&#xff1a;Linux系统的核心&#xff0c;控制着系统的所有硬件和软件&#xff0c;在必要时分配硬件&#xff0c;并根据需要执行软件。 内核主要功能&#xff1a; 系统内存管理&#xff1a;内核通过硬件上称为交换…

Proxifier下载安装

一、下载地址 官网&#xff1a; https://www.proxifier.com/ 下载链接 https://www.proxifier.com/distr/ProxifierSetup.exe 因为这个跳转直接下载的&#xff0c;我放沙箱里试了一下 二、安装 安装就是同意协议&#xff0c;选择安装位置&#xff0c;因为是正版&#xff0c;他…

U-ViT【All are Worth Words: A ViT Backbone for Diffusion Models】

Motivation Diffusion中常用的Backbone是UNet&#xff0c;使用 resnet 和 transformer 交替进行的&#xff0c;这样内存memory存储 其实也是不断shuffle变化的&#xff0c;resnet 以 feature 看 memory&#xff0c;而 transformer 以 token 看memory。如果可以统一memory的计算…

Simpy简介:python仿真模拟库-02/5

一、说明 关于python下的仿真库&#xff0c;本篇为第二部分&#xff0c;是更进一步的物理模型讲解&#xff0c;由于这部分内容强依赖于第一部分的符号介绍&#xff0c;因此&#xff0c;有以下建议&#xff1a; 此文为第二部分&#xff0c;若看第一部分。建议查看本系列的第一部…

盲盒小程序搭建,功能优势分析

盲盒作为一种潮玩商品&#xff0c;吸引了大量的年轻人&#xff0c;受众群体非常高&#xff0c;在市场上的发展快速。盲盒拥有独特的优势&#xff0c;给消费者提供了新奇的购物体验&#xff0c;能够让人们在购物中体验到盲盒的不确定性所带来的惊喜感和快乐。 盲盒小程序的出现…