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

先看一看效果,是不是很炫酷啊??

HTML代码:

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代码如下:

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代码如下:

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("""");
});
相关推荐
驰羽几秒前
[GO]GORM 常用 Tag 速查手册
开发语言·后端·golang
Narcissiffo9 分钟前
【C语言】str系列函数
c语言·开发语言
workflower13 分钟前
软件工程与计算机科学的关系
开发语言·软件工程·团队开发·需求分析·个人开发·结对编程
ajsbxi15 分钟前
【Java 基础】核心知识点梳理
java·开发语言·笔记
阿珊和她的猫27 分钟前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
懷淰メ34 分钟前
python3GUI--模仿百度网盘的本地文件管理器 By:PyQt5(详细分享)
开发语言·python·pyqt·文件管理·百度云·百度网盘·ui设计
新子y39 分钟前
【小白笔记】普通二叉树(General Binary Tree)和二叉搜索树的最近公共祖先(LCA)
开发语言·笔记·python
重整旗鼓~1 小时前
28.redisson源码分析分布式锁
java·开发语言
哼?~1 小时前
C++11标准 上 (万字解析)
开发语言·c++
爱看书的小沐1 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine