跟随光标圆形文本旋转

news2024/11/22 14:01:08

今天给大家带来的是光标变成圆形字符串环绕
不多说先上效果图
在这里插入图片描述
原理呢,也很简单
就是先把文本

<h2>大威天龙 - 世尊地藏 - 般若诸佛 - 般若巴嘛哄 -</h2>

然后使用js将文本处理成每个字符一个span,并且让他们旋转

	let text = document.querySelector('h2')
	
	text.innerHTML = text.textContent.replace(/\S/g, '<span>$&</span>')
	let element = document.querySelectorAll('span')
	for (let i = 0; i < element.length; i++) {
	  element[i].style.transform = 'rotate(' + i * 17 + 'deg)'
	}

然后添加鼠标移动事件,让这个文本跟随鼠标移动

document.addEventListener('mousemove', e => {
      text.style.left = e.pageX + 'px'
      text.style.top = e.pageY + 'px'
      text.style.transform = `rotate(${e.pageX / 2}deg)
      rotate(${e.pageY / 2}deg)`
    })

然后给每一个文本添加偏移

 transform-origin: 0 120px;

这样就成功了
遵循开源精神,你有我有大家有
源码就放下面了

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圆形文本旋转动画</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'STXingkai';
    }

    body {
      min-height: 100vh;
      background-color: #222;
      overflow: hidden;
      cursor: none;
    }

    h2 {
      position: absolute;
      font-size: 1.5em;
      color: #0f0;
      text-align: center;
      pointer-events: none;
      user-select: none;
      opacity: 0;
      transition: opacity 0.25s;
      animation: animateColor 5s linear infinite;
    }

    h2::before {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      background: #0f0;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    body:hover h2 {
      opacity: 1;
    }

    h2 span {
      position: absolute;
      top: -120px;
      font-weight: 400;
      text-transform: uppercase;
      transform-origin: 0 120px;
    }

    @keyframes animateColor {
      0% {
        filter: drop-shadow(0 0 5px #0f0) drop-shadow(0 0 15px #0f0) hue-rotate(0deg);
      }

      100% {
        filter: drop-shadow(0 0 5px #0f0) drop-shadow(0 0 15px #0f0) hue-rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <h2>大威天龙 - 世尊地藏 - 般若诸佛 - 般若巴嘛哄 -</h2>
  <script>
    let text = document.querySelector('h2')

    text.innerHTML = text.textContent.replace(/\S/g, '<span>$&</span>')
    let element = document.querySelectorAll('span')
    for (let i = 0; i < element.length; i++) {
      element[i].style.transform = 'rotate(' + i * 17 + 'deg)'
    }
    document.addEventListener('mousemove', e => {
      text.style.left = e.pageX + 'px'
      text.style.top = e.pageY + 'px'
      text.style.transform = `rotate(${e.pageX / 2}deg)
      rotate(${e.pageY / 2}deg)`
    })
  </script>
</body>

</html>

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

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

相关文章

详解FAT32文件系统的簇

FAT32文件系统中&#xff0c;簇&#xff08;Cluster&#xff09;是文件分配的基本单位。它是一组连续的扇区&#xff08;通常是硬盘扇区&#xff09;的集合&#xff0c;用于存储文件的数据。以下是关于FAT32簇的一些详细介绍&#xff1a; 簇的大小&#xff1a;簇的大小是FAT32文…

Node学习笔记之path模块

path 模块提供了 操作路径 的功能&#xff0c;我们将介绍如下几个较为常用的几个 API&#xff1a; API 说明 path.resolve 拼接规范的绝对路径常用 path.sep 获取操作系统的路径分隔符 path.parse 解析路径并返回对象 path.basename 获取路径的基础名称 path.dirname…

实际项目中最常用的设计模式

在软件开发领域,设计模式是一种经过验证的通用解决方案,用于解决各种常见问题。它们有助于提高代码的可维护性、可扩展性和可重用性。虽然有许多不同的设计模式,但以下是实际项目中最常用的一些: 1. 单例模式 (Singleton Pattern) 单例模式确保一个类只有一个实例,并提供…

计算机组成原理第三章 11 存储器的层次结构 存储器的分类 存储器的性能指标

文章目录 存储器的层次结构存储器的分类(存储介质分类)存取方式分类读写方式分类(是否可读可写)断电后信息是否丢失信息是否被破坏 存储器的性能指标 存储器的层次结构 其中CPU可以直接和cache和主存进行交互。辅存内的数据需要调到主存内才能被CPU访问&#xff0c;这很好理解&…

【C语言】指针进阶【下】

&#x1f388;个人主页&#xff1a;.满船清梦压星河_-CSDN博客 &#x1f302;c/c领域新星创作者 &#x1f389;欢迎&#x1f44d;点赞✍评论❤️收藏 &#x1f61b;&#x1f61b;&#x1f61b;希望我的文章能对你有所帮助&#xff0c;有不足的地方还请各位看官多多指教&#xf…

修改ConsoleApplication17_2项目实现oss上线

首先创建号oss&#xff0c;上传文件&#xff0c;复制临时链接 木马内写 可以看到能成功上线但是有个问题就是占用cpu大小为9%左右&#xff0c;这里我用的是腾讯云oss实现的&#xff0c;用阿里云oss实现也是9%左右 我再次进行url的aes加密 还是百分之9左右&#xff0c; 这里…

利用ChatGPT进行数据分析并生成数据分析报告

目录 1 1 请罗列出中国所有的省份 按省份人口数量排序&#xff0c;给出序号&#xff0c;并整理成表格&#xff0c;人口最多的排在最前面&#xff1b; 在原有的数据源上&#xff0c;添加一些新的分类&#xff0c;并将分类结果进行反馈。 在表格中添加以下类别&#xff1a;男女…

网络协议--ICMP:Internet控制报文协议

6.1 引言 ICMP经常被认为是IP层的一个组成部分。它传递差错报文以及其他需要注意的信息。ICMP报文通常被IP层或更高层协议&#xff08;TCP或UDP&#xff09;使用。一些ICMP报文把差错报文返回给用户进程。 ICMP报文是在IP数据报内部被传输的&#xff0c;如图6-1所示。 ICMP…

新兴网络安全威胁:数字防御新格局

根据Check Point Research (CPR)的数据&#xff0c;今年上半年犯罪活动大幅增加&#xff0c;第二季度全球每周网络攻击激增 8%&#xff0c;这创下了两年来的最高成交量。 勒索软件和黑客行为等传统威胁已经演变&#xff0c;犯罪团伙不断调整其方法和工具来渗透和影响世界各地的…

BFS专题9 中国象棋-马-有障碍

题目&#xff1a; 思路&#xff1a; 由题意&#xff0c;这也是 BFS 即可&#xff0c;这里注意的是&#xff0c;我们要存储好哪些坐标有障碍&#xff0c;在搜索各个方向的时候&#xff0c;判断搜索的对应方向是否有障碍&#xff0c;即 !r[tem.x dx[i] / 2][tem.y dy[i] / 2]…

Hadoop3教程(三十三):(生产调优篇)慢磁盘监控与小文件归档

文章目录 &#xff08;161&#xff09;慢磁盘监控&#xff08;162&#xff09;小文件归档小文件过多的问题如何对小文件进行归档 参考文献 &#xff08;161&#xff09;慢磁盘监控 慢磁盘&#xff0c;是指写入数据时特别慢的一类磁盘。这种磁盘并不少见&#xff0c;当机器运行…

HTML选项框的设计以及根据不同选项的值对应不同的事件

文章目录 HTML选项框的设计JS根据不同的选项框对应出不同的事件 HTML选项框的设计 在前端页面的设计中&#xff0c;多选框的设计用select标签完成实现 全部选项都显示的选项框 <form><select multiple"multiple"><option></option><opti…

google登录k8s dashboard ui显示“您的连接不是私密连接”问题解决梳理

1.问题描述 OS Version:CentOS Linux release 7.9.2009 (Core) K8S Version:Kubernetes v1.20.4 k8s dashboard ui安装完毕后&#xff0c;通过google浏览器登录返现https网页&#xff0c;发现非官方的https网页无法打开 网址&#xff1a;https://192.168.10.236:31001 2.原…

[java进阶]——异常详解,try catch捕获异常,抛出异常

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 一、异常的体系结构 二、处理异常的本质 三、异常处理的三种方式 3.1虚拟机jvm处理(默认) 3.2 try catch捕获异常 3.3抛出异常 3.4finally关键字 四、自定义异常 五、总结 一、异常的体系结构 分析&#…

pensieve运行的经验

1运行run_videopy时出现如下问题&#xff1a; cmd: Union[List[str], str], ^ SyntaxError: invalid syntax原因是EasyProcess版本与python版本不对应&#xff0c;解决办法可见之前这篇博客&#xff1a;SyntaxError: invalid syntax。 2解决完上述问题后&#xff0c;输…

NSSCTF第8页(1)

[HGAME 2023 week1]Classic Childhood Game js代码审计&#xff0c;找关键语句&#xff0c;发现event.js里边东西是最多的 找到了通关语句 他下边应该是就关键代码了&#xff0c;有一串16进制代码 解出来是base64&#xff0c;接着解 两次base64 解码&#xff0c;就得到了flag…

Vector3(即是位置,也是方向)

在三维世界中&#xff0c;最重要的就是确定物体在三维世界中 的位置、大小和缩放等信息。在Unity中&#xff0c;Vector3结构体就是用来表示这些信息的&#xff0c;此外也用Vector2来表示二维世界中的信息。 Vector3结构体由x、y、z这3个数值组成&#xff0c;表示了一个向量&am…

Nautilus Chain 与 Coin98 生态达成合作,加速 Zebec 生态亚洲战略进

目前&#xff0c;行业内首个模块化 Layer3 架构公链 Nautilus Chain 已经上线主网&#xff0c;揭示了模块化区块链领域迎来了全新的进程。在主网上线后&#xff0c;Nautilus Chain 将扮演 Zebec 生态中最重要的底层设施角色&#xff0c;并将为 Zebec APP 以及 Zebec Payroll 规…

算法-动态规划-java

文章目录 动态规划动态规划的核心动态规划算法的两种形式首先使用递归的方法实现这个算法①自顶向下的备忘录法②自底向上的动态规划&#xff08;推荐使用&#xff09; 更好的理解动态规划经典例题&#xff1a;钢条分割首先使用递归的方法实现这个算法①自顶向下的备忘录法②自…

2023-10-16 LeetCode每日一题(只出现一次的数字 III)

2023-10-16每日一题 一、题目编号 260. 只出现一次的数字 III二、题目链接 点击跳转到题目位置 三、题目描述 给你一个整数数组 nums&#xff0c;其中恰好有两个元素只出现一次&#xff0c;其余所有元素均出现两次。 找出只出现一次的那两个元素。你可以按 任意顺序 返回答…