svg完成鼠标样式并使用

        本次分享的是通过svg标签实现的鼠标样式,并在页面中进行使用的整个过程,最后还会分享快速制作svg的简单方式。

        如有改进的方法或者发现错误也可以在评论区留言啊。

一、鼠标的svg样式

1.小飞机型

    <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title><path id="svg_14" d="m343.99998,225.90477" opacity="NaN" stroke="#000" fill="none" /><path id="svg_18" d="m305.71414,270.95231" opacity="NaN" stroke="#000" fill="#d4aaff" /><path stroke="#000" id="svg_19"d="m227.24757,58.25095c-0.35356,0 -0.66812,0.13387 -0.93353,0.3767c-0.26518,0.24263 -0.48453,0.59029 -0.66705,1.02449c-0.365,0.86827 -0.58952,2.088 -0.71234,3.54874c-0.12257,1.45793 -0.14323,3.15554 -0.09231,4.97281c-4.36735,1.65257 -13.22515,5.06469 -13.93671,5.82654c-0.94736,1.01432 -0.64127,2.17679 -0.25951,2.94849l14.56196,-2.73373c0.30781,3.56252 0.74546,7.09101 1.12685,9.85586c-1.42407,0.38442 -4.08235,1.14348 -4.63105,1.61418c-0.75588,0.64843 -0.75588,2.74252 -0.75588,2.74252l5.95994,-0.4471c0.14037,0.90266 0.22815,1.42935 0.22815,1.42935l0.00871,0.04753l0.04703,0l0.10972,0l0.04702,0l0.00871,-0.04753c0,0 0.08762,-0.5267 0.22815,-1.42935l5.96168,0.4471c0,0 0.00001,-2.09409 -0.75588,-2.74252c-0.54891,-0.47088 -3.20913,-1.23166 -4.63279,-1.61595c0.3806,-2.75636 0.81748,-6.27135 1.12511,-9.82239l14.39128,2.70204c0.38175,-0.77169 0.68959,-1.93416 -0.25776,-2.94849c-0.70275,-0.75242 -9.34652,-4.08865 -13.76777,-5.76318c0.05283,-1.84082 0.03341,-3.56158 -0.09057,-5.03618l0,-0.00352c-0.12288,-1.45912 -0.34764,-2.67766 -0.71233,-3.54522c-0.18247,-0.43408 -0.40003,-0.78178 -0.66531,-1.02449c-0.26541,-0.24283 -0.57997,-0.3767 -0.93353,-0.3767l-0.00001,0z"fill="#d4aaff" /><path stroke="#000" id="svg_21"d="m15.02999,5.22579c-0.25031,0 -0.473,0.0975 -0.6609,0.27434c-0.18774,0.1767 -0.34302,0.42991 -0.47224,0.74613c-0.2584,0.63235 -0.41736,1.52067 -0.5043,2.58451c-0.08678,1.06179 -0.1014,2.29815 -0.06535,3.62165c-3.09189,1.20355 -9.36283,3.68856 -9.86658,4.24341c-0.67069,0.73872 -0.45399,1.58533 -0.18372,2.14735l10.30923,-1.99095c0.21791,2.59455 0.52776,5.16431 0.79776,7.17792c-1.00818,0.27997 -2.89013,0.83278 -3.27858,1.17559c-0.53513,0.47224 -0.53513,1.99735 -0.53513,1.99735l4.21937,-0.32562c0.09938,0.6574 0.16152,1.04098 0.16152,1.04098l0.00617,0.03461l0.03329,0l0.07768,0l0.03329,0l0.00617,-0.03461c0,0 0.06203,-0.38359 0.16152,-1.04098l4.22061,0.32562c0,0 0,-1.5251 -0.53513,-1.99735c-0.3886,-0.34294 -2.27192,-0.89701 -3.27982,-1.17688c0.26944,-2.00743 0.57874,-4.56736 0.79653,-7.15355l10.1884,1.96787c0.27027,-0.56202 0.4882,-1.40863 -0.18249,-2.14735c-0.49752,-0.54798 -6.61692,-2.97772 -9.74698,-4.19726c0.0374,-1.34065 0.02365,-2.59386 -0.06412,-3.6678l0,-0.00256c-0.08699,-1.06267 -0.24611,-1.95012 -0.5043,-2.58194c-0.12918,-0.31613 -0.28321,-0.56936 -0.47101,-0.74613c-0.1879,-0.17685 -0.41059,-0.27434 -0.66089,-0.27434l0,0z"fill="#d4aaff" /></g></svg>

样式:

2.小三角型

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path class="inner"d="M25,30a5.82,5.82,0,0,1-1.09-.17l-.2-.07-7.36-3.48a.72.72,0,0,0-.35-.08.78.78,0,0,0-.33.07L8.24,29.54a.66.66,0,0,1-.2.06,5.17,5.17,0,0,1-1,.15,3.6,3.6,0,0,1-3.29-5L12.68,4.2a3.59,3.59,0,0,1,6.58,0l9,20.74A3.6,3.6,0,0,1,25,30Z"fill="#F2F5F8"/><path class="outer"d="M16,3A2.59,2.59,0,0,1,18.34,4.6l9,20.74A2.59,2.59,0,0,1,25,29a5.42,5.42,0,0,1-.86-.15l-7.37-3.48a1.84,1.84,0,0,0-.77-.17,1.69,1.69,0,0,0-.73.16l-7.4,3.31a5.89,5.89,0,0,1-.79.12,2.59,2.59,0,0,1-2.37-3.62L13.6,4.6A2.58,2.58,0,0,1,16,3m0-2h0A4.58,4.58,0,0,0,11.76,3.8L2.84,24.33A4.58,4.58,0,0,0,7,30.75a6.08,6.08,0,0,0,1.21-.17,1.87,1.87,0,0,0,.4-.13L16,27.18l7.29,3.44a1.64,1.64,0,0,0,.39.14A6.37,6.37,0,0,0,25,31a4.59,4.59,0,0,0,4.21-6.41l-9-20.75A4.62,4.62,0,0,0,16,1Z"fill="#111920"/></svg>

样式:

二、鼠标样式的使用

1.HTML部分(可以更换自己的svg图标,但需要注意修改大小)

这里以小三角举例

  <div class="pointer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path class="inner"d="M25,30a5.82,5.82,0,0,1-1.09-.17l-.2-.07-7.36-3.48a.72.72,0,0,0-.35-.08.78.78,0,0,0-.33.07L8.24,29.54a.66.66,0,0,1-.2.06,5.17,5.17,0,0,1-1,.15,3.6,3.6,0,0,1-3.29-5L12.68,4.2a3.59,3.59,0,0,1,6.58,0l9,20.74A3.6,3.6,0,0,1,25,30Z"fill="#F2F5F8" /><path class="outer"d="M16,3A2.59,2.59,0,0,1,18.34,4.6l9,20.74A2.59,2.59,0,0,1,25,29a5.42,5.42,0,0,1-.86-.15l-7.37-3.48a1.84,1.84,0,0,0-.77-.17,1.69,1.69,0,0,0-.73.16l-7.4,3.31a5.89,5.89,0,0,1-.79.12,2.59,2.59,0,0,1-2.37-3.62L13.6,4.6A2.58,2.58,0,0,1,16,3m0-2h0A4.58,4.58,0,0,0,11.76,3.8L2.84,24.33A4.58,4.58,0,0,0,7,30.75a6.08,6.08,0,0,0,1.21-.17,1.87,1.87,0,0,0,.4-.13L16,27.18l7.29,3.44a1.64,1.64,0,0,0,.39.14A6.37,6.37,0,0,0,25,31a4.59,4.59,0,0,0,4.21-6.41l-9-20.75A4.62,4.62,0,0,0,16,1Z"fill="#111920" /></svg>  </div>

2.CSS部分

简单的修改以下大小以及鼠标的隐藏

* {margin: 0;padding: 0;box-sizing: border-box;
}html {cursor: none;
}.pointer {width: 32px;height: 32px;position: fixed;margin-left: -16px;transform-origin: center top;
}

3.JS部分

// 获取DOM元素
const pointer = document.querySelector('.pointer');// 鼠标移动的相对角度
let rad = 0;// 添加鼠标移动事件
window.onmousemove = (e) => {// 获取移动距离const x = e.clientX;const y = e.clientY;// 获取移动的相对距离const mx = e.movementX;const my = e.movementY;// 如果相对移动距离过小则不修改鼠标的角度if (Math.abs(mx) + Math.abs(my) < 5) return;// 否则修改rad = Math.atan2(mx, -my);pointer.style.transform = `translate(${x}px, ${y}px) rotate(${rad}rad)`;
};

三、优缺点

1.优点

代码量很少,并且简单易懂,可直接使用。

2.缺点

也是因为代码过少的原因,考虑不够全面,当鼠标移动较慢时会有明显的卡顿,不适用上线界面。

四、svg制作教程

只需这个网站:SVG 教程 | 菜鸟教程 (runoob.com)  中的svg在线编辑器,编辑好导出svg代码即可。

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

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

相关文章

【python】OpenCV—Merge Image

文章目录 np.hstack / np.vstackSlicecv2.addWeighted自定义渐变式叠加cv2.bitwise_not / cv2.bitwise_and / cv2.add np.hstack / np.vstack 利用 numpy 的 hstack 和 vstack&#xff0c;对图片进行拼接 import cv2 import numpy as nph, w 256,256 img1 cv2.resize(cv2.i…

ssm055基于spring框架的中小企业人力资源管理系统的设计及实现+jsp-手把手调试搭建

ssm055基于spring框架的中小企业人力资源管理系统的设计及实现jsp-手把手调试搭建 ssm055基于spring框架的中小企业人力资源管理系统的设计及实现jsp-手把手调试搭建

Pico4 MR Unity零基础开发之开启MR透视

一、新建场景&#xff1a;SeethroughScene 1、新建场景。 二、添加 XR 摄像机进行设置 1、在 Hierarchy 窗口中&#xff0c;右击默认添加的 Main Camera&#xff0c;然后点击 Delete 将其删除。 2、点击 > XR > XR Origin (VR)&#xff0c;将 XR Origin 添加至场景 3、…

[leetcode hot 150]第七十题,爬楼梯(动态规划)

题目&#xff1a; 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 爬到第 n 阶楼梯的方法数量等于爬到第 n-1 阶和第 n-2 阶的方法数量之和,即: f(n) f(n-1) f(n-2) 边界条件 还需要考虑边界…

【调试笔记-20240602-Linux-在 OpenWRT-23.05 上配置 frps 与 frpc 之间使用 TLS 进行传输】

调试笔记-系列文章目录 调试笔记-20240602-Linux-在 OpenWRT-23.05 上配置 frps 与 frpc 之间使用 TLS 进行传输 文章目录 调试笔记-系列文章目录调试笔记-20240602-Linux-在 OpenWRT-23.05 上配置 frps 与 frpc 之间使用 TLS 进行传输 前言一、调试环境操作系统&#xff1a;O…

Ubuntu 22.04安装cuda及Pytorch教程

文章目录 1、安装显卡驱动2、安装CUDA3、安装cuDNN4、安装pyTorch5、卸载CUDA参考资料 在PyTorch中使用CUDA&#xff0c;需要确保安装的PyTorch版本与你的CUDA版本兼容&#xff0c; 且正确安装了匹配GPU的CUDA Toolkit。以下是在PyTorch中使用CUDA的一般步骤&#xff1a; 检查C…

Padstack制作贴片和通孔焊盘

Padstack制作贴片和通孔焊盘 一、贴片焊盘制作 先选择SMD Pin&#xff0c;下面的pad geometry根据需求选择&#xff0c;一般是Circle和Rectangle&#xff0c;然后选择单位&#xff0c;mm制。 然后点击Design Layers&#xff0c;只需要修改Regular Pad常规焊盘就行&#xff0c…

七天进阶elasticsearch[two]

批量保存 批量保存是通过_bulk API来实现的 请求方式 post 请求地址 _bulk 通过_bulk操作文档,一般至少有两行参数 第一行用于确定要干什么(插入,修改还是删除) 第二行才是操作的数据; 当然以上是标准操作,也可以不遵循标准操作,使用不同的请求方式来完成 批量保存demo…

浅谈申请小程序地理位置权限的正确打开方式

小程序地理位置接口有什么功能&#xff1f; 这篇内容会教大家如何快速申请“获取当前的地理位置&#xff08;onLocationChange&#xff09;”接口&#xff0c;以便帮助大家顺利开通接口。以下内容是本人经历了多次的申请经历得出来的经验&#xff0c;来之不易&#xff0c;望大家…

【Python】让我们来生成二维码吧

准备操作 安装qrcode包&#xff1a;pip install qrcode[pil] 安装Pillow包&#xff1a;pip install Pillow 代码 import qrcode import hashlibdef generate_filename(url):data_bytes url.encode("utf-8")file_name hashlib.sha256(data_bytes).hexdigest()re…

加密货币初创企业指南:如何寻找代币与市场的契合点

撰文&#xff1a;Mark Beylin&#xff0c;Boost VC 编译&#xff1a;Yangz&#xff0c;Techub News 原文来源&#xff1a;香港Web3媒体Techub News 在 Y Combinator 创始人 Paul Graham 《Be Good》一文中概述了初创企业如何找到产品与市场契合点的方法&#xff0c;即制造人…

图卷积网络原理及实践

图神经网络 (GNN) 是深度学习领域最吸引人且发展最快的架构之一。作为旨在处理图结构数据的深度学习模型&#xff0c;GNN 具有非凡的多功能性和强大的学习能力。 在各种类型的 GNN 中&#xff0c;图卷积网络 (GCN) 已成为最流行且应用最广泛的模型。GCN 具有创新性&#xff0c…

现在有一个生产计划,甲乙丙3个品类共16个产品,生产时间6天,每天甲品类可以生产1张单,乙3张,丙1张,请用MySQL写出H列的效果

现在有一个生产计划&#xff0c;甲乙丙3个品类共16个产品&#xff0c;生产时间6天&#xff0c;每天甲品类可以生产1张单&#xff0c;乙3张&#xff0c;丙1张&#xff0c;请用MySQL写出H列的效果吗&#xff1f; 最终展示结果要求为&#xff1a; 品类产品生产时间开始生产时间…

Android开机动画压缩包zip,自制开机动画(基于Android10.0.0-r41)

文章目录 Android开机动画压缩包zip&#xff0c;自制开机动画1.Android加载压缩包原理2.自制开机动画 Android开机动画压缩包zip&#xff0c;自制开机动画 1.Android加载压缩包原理 这里有个md文件我们看下 核心部分, 首先要创建一个文件叫做desc.txt&#xff0c;这是规定的…

SystemUI中添加系统新图标

文章目录 描述实现步骤framework中修改SystemUI中修改 描述 在系统状态栏的右侧添加一个自定义图标 实现步骤 framework中修改 1.定义右侧系统图标的插槽 frameworks/base/core/res/res/values/config.xml文件中内容修改如下所示&#xff0c;定义的图标为status_bar_custom…

【AI】你要的U-KAN来了

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 U-KAN来了&#xff0c;快是真的快的&#xff0c;上个月才出的KAN&#xff0c;不得不说快。 先占个坑&#xff0c;有时间细看。 下面放上摘要 1. 正文 …

使用Python的xml.etree.ElementTree模块解析XML文件

使用Python的xml.etree.ElementTree模块解析XML文件 在Python中,处理XML文件是一项常见的任务。XML(可扩展标记语言)是一种用于编码文档的标记语言,它提供了一种结构化的方式来描述和传输数据。对于处理XML文件,Python标准库提供了xml.etree.ElementTree(通常简称为ET)模…

Linux中的`paste`命令:合并文件的简单艺术

Linux中的paste命令&#xff1a;合并文件的简单艺术 在Linux的世界中&#xff0c;文本处理是一项常见的任务。有时&#xff0c;我们可能需要将两个或多个文件的内容合并在一起&#xff0c;以创建新的输出。这就是paste命令的用武之地。paste命令允许你按行合并文件的内容&…

网络编程介绍(IP)(一)

定义&#xff1a;可以让设备中的程序与网络上其他设备中的程序进行数据交互&#xff08;实现网络通信的&#xff09;。 java.net.*包下提供了网络编程的解决方案。 基本的通信架构&#xff1a; CS架构&#xff08; Client客户端/Server服务端 &#xff09;&#xff1a; Clie…

Django 外键关联数据

在设计数据库的时候&#xff0c;是得需要通过外键的形式将各个表进行连接。 原先的表是这样的 要想更改成这样&#xff1a; 下面是操作步骤&#xff1a; 有两张表是关联的 # 在 models.py 里创建class Department(models.Model):"""部门表""&quo…