跟随光标圆形文本旋转-编程知识

跟随光标圆形文本旋转

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

<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>