鼠标样式的自定义模式

最新推荐文章于 2023-12-29 19:07:55 发布

菜白CAIbai

最新推荐文章于 2023-12-29 19:07:55 发布

阅读量215

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/alexei9/article/details/130020559

版权

通过CSS的cursor属性可以设置鼠标样式，若要使用自定义图片，需将其设置为url()并配合.cur格式的图片文件。文中提供了一段HTML示例代码，展示如何改变body的鼠标样式，并附带了一个资源链接供下载。

摘要由CSDN通过智能技术生成

众所周知，通过鼠标的cursor属性可以设置鼠标在界面中的显示模式。而有时我们想要自定义一个图片来定义鼠标样式。有些小伙伴们对此无从下手。因此整理这篇笔记来讲述如何自定义图片鼠标样式。

定义鼠标样式需要使用cursor属性，而自定义图片只需要将cursor的值改为url()来获取鼠标样式的地址，当然，鼠标样式需要使用.cur的图片文件才可以正常使用，市面上有很多转换模式的软件，感兴趣的小伙伴们可以试一试。（这里附上两个光标文件）。

接下来是源码。

<!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>Document</title>
    <style>
        body {
            height: 100vh;
            cursor: url(./normal.cur), auto;
        }
    </style>
</head>

<body>

</body>

</html>

http://链接：https://pan.baidu.com/s/1bTgMacU8a5cvzfHyrdZfUg?pwd=6pny 提取码：6pny --来自百度网盘超级会员V2的分享

菜白CAIbai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标样式的自定义模式

定义鼠标样式需要使用cursor属性，而自定义图片只需要将cursor的值改为url()来获取鼠标样式的地址，当然，鼠标样式需要使用.cur的图片文件才可以正常使用，市面上有很多转换模式的软件，感兴趣的小伙伴们可以试一试。（这里附上两个光标文件）。众所周知，通过鼠标的cursor属性可以设置鼠标在界面中的显示模式。而有时我们想要自定义一个图片来定义鼠标样式。有些小伙伴们对此无从下手。因此整理这篇笔记来讲述如何自定义图片鼠标样式。
复制链接

扫一扫