🖲️一行代码实现鼠标换肤

前言

在上网冲浪的时候,经常可以看到有一些网站,一进去鼠标指针就变成一些动态小人,或者自定义的样式。

像下面这样

那么这是实现的呢?

很简单，通过css的cursor属性实现的。

cursor属性的介绍

cursor CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。

平常开发中，肯定有设置过

css 复制代码

cursor:pointer;

让鼠标放到按钮上面的时候，指针变成这种样式。

但是这个属性除了直接设置关键字来修改样式，还支持引入url的方式来修改鼠标样式。

用法

语法如下：

css 复制代码

// cursor: url(xxx), [关键字];
cursor: url('./img/指针.png'), pointer;

效果如下:

上面这句代码中cursor: url('./img/指针.png'), pointer;, url 后面一定要再设置一个默认值,要是图片加载失败,就会使用下一个样式

不设置的话,就会属性值无效

支持的类型

类型	是否支持
png	✔️
jpg	✔️
gif	✖️
wepb	✔️
svg	✔️
cur	✔️

gif类型:引进去之后,不会动,只会变成静态的图片

cur:是静态光标文件,平常电脑的鼠标光标就是这种文件类型

完整代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网页鼠标换肤</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="btns">
      <button onclick="mousePeeling('./img/指针.png')">png</button>
      <button onclick="mousePeeling('./img/指针.svg')">svg</button>
      <button onclick="mousePeeling('./img/鼠标.jpg')">jpg</button>
      <button onclick="mousePeeling('./img/波奇.webp')">webp</button>
      <button onclick="mousePeeling('./img/正常选择.cur')">cur</button>
    </div>
    <script>
      function mousePeeling(url) {
        const body = document.body
        body.style.cursor = `url(${url}), pointer`
      }
    </script>
  </body>
</html>

这里我写了一个demo,来演示效果

效果如下

结尾

这是效果的实现非常简单,主要就是cursor属性的应用。

有几个要注意的地方

图片的尺寸最大不超过32*32,超过之后，图片加载不出来
url引入图片后，结尾一定要设置一个默认的光标样式。