Javascript特效之鼠标悬停特效【css】

本文主要是介绍Javascript特效之鼠标悬停特效【css】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先看一看效果，是不是很炫酷啊？？
在这里插入图片描述

HTML代码：

<!DOCTYPE html>
<html><head><meta charset=""UTF-8"" /><title>CSS特效：鼠标悬停效果</title><link rel=""stylesheet"" href=""style.css"" /></head><body><div class=""cursor""></div><ul><li><a href=""#"">每天嘻嘻哈哈</a></li><li><a href=""#"">热爱生活，快乐成长</a></li><li><a href=""#"">CSS特效：鼠标悬停效果</a></li></ul><script src=""script.js""></script></body>
</html>

CSS代码如下：

{margin: 0;padding: 0;box-sizing: border-box;
}body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #222;cursor: none;
}.cursor {position: fixed;width: 20px;height: 20px;transform: translate(-50%, -50%);pointer-events: none;opacity: 0;border-radius: 50%;background-color: #0f0;box-shadow: 0 0 5px #0f0,0 0 15px #0f0,0 0 30px #0f0,0 0 60px #0f0;transition: opacity 0.5s;z-index: 999;
}body:hover .cursor {opacity: 1;
}ul {display: flex;justify-content: center;align-items: center;flex-direction: column;list-style: none;
}ul li {padding: 10px 0;
}ul a {text-decoration: none;color: #bbb;cursor: none;
}ul li span {font-size: 2.5em;letter-spacing: 0.05em;transition: 0.25s;
}ul li:hover span {color: #0f0;text-shadow: 0 0 5px #0f0,0 0 15px #0f0,0 0 30px #0f0,0 0 60px #0f0,0 0 100px #0f0;
}

JavaScript代码如下：

let cursor = document.querySelector("".cursor"");document.addEventListener(""mousemove"", (e) => {cursor.style.left = `${e.pageX}px`;cursor.style.top = `${e.pageY}px`;
});document.querySelectorAll(""ul a"").forEach((text) => {text.innerHTML = text.innerText.split("""").map((words, i) => `<span style=""transition-delay:${i * 30}ms"">${words}</span>`).join("""");
});