之前的笔记-鼠标美化
这篇笔记之前写过,但是我没备份....
这次就不写那么多了,只把方法写出来!
1.先去找鼠标样式
我电脑使用的 刻晴 样式
小站使用的ArcStarry样式
2.去自定义的额外css样式添加鼠标样式代码
eg:
body { cursor: url(https://asteroidqiao.top/wp-content/uploads/2022/11/Arrow.cur), default; } button,a{ cursor: url(https://asteroidqiao.top/wp-content/uploads/2022/11/Hand.cur), pointer; } input{ cursor:url(https://asteroidqiao.top/wp-content/uploads/2022/11/Help.cur), text; } textarea,input:focus{ cursor:url(https://asteroidqiao.top/wp-content/uploads/2022/11/IBeam.cur), text; }
附录:
常见的光标类型 :
[collapse title="展开"]
|
值
|
描述
|
|
url
|
需使用的自定义光标的 URL。
注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
|
|
default
|
默认光标(通常是一个箭头)
|
|
auto
|
默认。浏览器设置的光标。
|
|
crosshair
|
光标呈现为十字线。
|
|
pointer
|
光标呈现为指示链接的指针(一只手)
|
|
move
|
此光标指示某对象可被移动。
|
|
e-resize
|
此光标指示矩形框的边缘可被向右(东)移动。
|
|
ne-resize
|
此光标指示矩形框的边缘可被向上及向右移动(北/东)。
|
|
nw-resize
|
此光标指示矩形框的边缘可被向上及向左移动(北/西)。
|
|
n-resize
|
此光标指示矩形框的边缘可被向上(北)移动。
|
|
se-resize
|
此光标指示矩形框的边缘可被向下及向右移动(南/东)。
|
|
sw-resize
|
此光标指示矩形框的边缘可被向下及向左移动(南/西)。
|
|
s-resize
|
此光标指示矩形框的边缘可被向下移动(南)。
|
|
w-resize
|
此光标指示矩形框的边缘可被向左移动(西)。
|
|
text
|
此光标指示文本。
|
|
wait
|
此光标指示程序正忙(通常是一只表或沙漏)。
|
|
help
|
此光标指示可用的帮助(通常是一个问号或一个气球)。
|
[/collapse]
查看 菜鸟教程 演示
鼠标样式图:[caption id="attachment_214" align="alignnone" width="1066"]

图源于网络[/caption]
[label]ps:还可以在插件市场搜索cursor(鼠标)相关的插件,在ui界面自定义鼠标样式。[/label]
本文来自博客园,作者:AsteroidQiao,转载请注明原文链接:https://www.cnblogs.com/asteroidqiao/articles/17494234.html

浙公网安备 33010602011771号