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("""");
});

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

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

相关文章

Pair和Triple的最佳实践

在软件开发中&#xff0c;数据结构是至关重要的概念。它们帮助我们以高效和有组织的方式存储和处理数据。在Java语言中&#xff0c;Pair&#xff08;对&#xff09;和Triple&#xff08;三元组&#xff09;是两个常见的数据结构&#xff0c;它们在不同的场景中都有广泛的应用。…

SQL分类——DDL(数据定义语言)

一、DDL&#xff08;数据定义语言&#xff09; &#xff08;1&#xff09;DDL——数据库——操作的相关语法&#xff1a; 查询 可以一次性查询当前数据库服务器中所有的数据库&#xff1a; SHOW DATABASES; 查询当前所处的数据库&#xff1a; SELECT DATABASE(); 创建 一般最简…

HTML语义化标签:为何它们如此重要?

HTML语义化标签&#xff1a;为何它们如此重要&#xff1f; 引言1. HTML语义化标签的基本概念2. HTML语义化标签的作用2.1 提升网页可读性2.2 增强可访问性2.3 优化搜索引擎排名2.4 提高性能 3. 代码示例结尾讨论 引言 在前端开发的世界里&#xff0c;HTML作为构建网页的基础语…

如何在软考机考中使用双拼双拼输入法

如何在软考机考中使用双拼双拼输入法 测试环境 2024/05/25 2024年度上半年计算机技术与软件专业技术资格&#xff08;水平&#xff09;计算机化考试 如何在软考机考中使用双拼双拼输入法 Ctrl Shift 或者 Win Space 切换到谷歌拼音 然后右键控件&#xff0c;打开首选项&a…

Python | Leetcode Python题解之第101题对称二叉树

题目&#xff1a; 题解&#xff1a; class Solution:# 在【100. 相同的树】的基础上稍加改动def isSameTree(self, p: Optional[TreeNode], q: Optional[TreeNode]) -> bool:if p is None or q is None:return p is qreturn p.val q.val and self.isSameTree(p.left, q.ri…

热加载之再也不用喝杯茶等配置生效了

I. 背景介绍 Spring Boot作为一款基于Spring框架的快速应用开发平台&#xff0c;自发布以来就以其简化的配置、快速的启动和部署能力获得了广泛的关注和应用。它遵循“约定优于配置”的原则&#xff0c;通过自动配置机制减少了开发者的工作量&#xff0c;使得创建独立运行的、…

Transformer详解(1)-结构解读

Transormer块主要由四个部分组成&#xff0c;注意力层、位置感知前馈神经网络、残差连接和层归一化。 1、注意力层(Multi-Head Attention) 使用多头注意力机制整合上下文语义&#xff0c;它使得序列中任意两个单词之间的依赖关系可以直接被建模而不基于传统的循环结构&#…

基于.net开发的博客系统

基于.net开发可以批量上传md文件生成文章的博客系统 .NET 个人博客 基于.net开发的博客系统 个人博客系统&#xff0c;采用.net core微服务技术搭建&#xff0c;采用传统的MVC模式&#xff0c;使用EF core来对mysql数据库(sqlite数据库)进行CRUD操作项目 为什么要自己开发博客…

Python面试宝典:Python中与数据库连接和操作相关的面试笔试题(1000加面试笔试题助你轻松捕获大厂Offer)

Python面试宝典:1000加python面试题助你轻松捕获大厂Offer【第二部分:Python高级特性:第十五章:数据库编程:第一节:数据库连接和操作】 第十五章:数据库编程第一节:数据库连接和操作数据库API规范:DB-API使用SQLite数据库使用MySQL数据库使用ORM工具注意事项python中和…

生信技能46 - Call人类线粒体变异和提取chrM变异位点

使用bwa将样本fastq文件比对到线粒体参考基因组, 并使用bcftools进行call变异。 基础软件安装 conda install bcftools -y conda install samtools-y conda install bwa -y一、Call人类线粒体变异 1. 构建线粒体参考基因组 参考基因组: 人类线粒体参考基因组NC_012920.1 …

clion读取文件设置为读取当前目录下的文件

1.问题 使用vs读取文件时一切正常 但是同样的代码在clion中无法正常执行 原因 原因&#xff1a;clion的源文件找不到input.txt文件的位置 需要设置工作目录&#xff0c;例如此时input.txt在当前目录下&#xff0c;那么就设置 设置当前文件的工作目录为$FileDir$即可&am…

Ubuntu 如何根据NVIDIA显卡型号确定对应的显卡驱动版本并安装

目录 一、查询推荐安装的驱动版本 二、安装推荐版本的驱动 1. 通过终端安装&#xff0c;只安装 nvidia 驱动&#xff08;亲测可用&#xff01;&#xff09; 2. 通过 software & Updates 安装&#xff0c;安装 nvidia 驱动。 三、查询能安装的最新的显卡驱动版本 1. 方…

人生是场无限游戏

人生是有限的&#xff0c;但游戏是无限的&#xff0c;所谓无限&#xff0c;就是你有无限个选择&#xff0c;可以规划无限个发展路径&#xff0c;追求无限种人生成就可能。 我经常把人生比喻为游戏&#xff0c;我觉得这样更容易理解我们所处的环境和所做出的选择。我最近和我女儿…

C++—— set、map、multiset、multimap的介绍及使用

目录 关联式容器 关联式容器的特点和使用场景 树形结构与哈希结构 树形结构 哈希结构 键值对 set set的介绍 set的定义方式 set的使用 multiset map map的介绍 map的定义方式 map的使用 multimap 关联式容器 C标准模板库&#xff08;STL&#xff09;中的关联…

AI必然趋势下,产品经理未来何在?路怎么走?

AI已经普遍运用到产品经理的日常工作中了。让它写个需求分析、做个PRD不在话下… 因为AI&#xff0c;也能经常听到有人在谈论&#xff1a;产品经理未来是否会被取代&#xff1f; 未来&#xff0c;产品经理的路该往哪走、怎么走&#xff1f; 未来&#xff0c;产品经理职业规划…

瑞芯微RV1126——ffmpeg环境搭建

本篇文章来介绍一下&#xff0c;在ubuntu上搭建一个比较完整的ffmpeg环境需要的步骤以及流程。为后期将我们开发的应用程序移植到RV1126开发板上做准备。 在安装ffmpeg之前&#xff0c;为了方便后续的操作&#xff0c;我们可以先搭建好samba服务器。所以本节将分为两个部分&am…

bash脚本简化

bash脚本简化开源项目 准备 _importBSFn.sh中的变量MyGitSvr修改为合适的当前git服务前缀 (若无该变量 则不用修改) toc git代理设置 、 git代理取消 &#xff5e; gitproxy.sh 软链接目录c项目内目录CppPrj_IncDir为给定软链接target_inc_dir &#xff5e; link_CppPrj_i…

keep-alive的使用

Vue中的<keep-alive>组件是前端开发中的一个宝藏功能&#xff0c;它如同时光胶囊般保留组件的状态&#xff0c;让组件在切换时仿佛按下暂停键&#xff0c;再次回来时还能继续播放&#xff0c;极大地优化了用户体验和性能。&#x1f680;✨ 作用 状态保留&#xff1a;当包…

枣庄高防服务器采用了什么样的高性能硬件?

枣庄高防服务器采用了什么样的高性能硬件&#xff1f;这是许多企业、开发者和网站运营者关心的问题。高性能硬件对于服务器的稳定性、响应速度以及安全性都至关重要。选择合适的高性能硬件可以确保服务器在面对大流量、DDoS攻击等情况下能够稳定运行&#xff0c;为用户提供良好…

AI多模态「六边形战士」,原创音乐、1分钟百页PPT、抖音爆款……

2024年AI行业最大的看点是什么&#xff1f; 那一定是多模态AI应用。 大模型发展到今天这个阶段&#xff0c;文本处理已经是各家大模型的必备技能了&#xff0c;对音频、视觉等多模态的理解和应用才是下一个阶段大模型比拼的赛道。 3.5研究测试&#xff1a;hujiaoai.cn 4研究测…