🏝️鼠标美化
🏝️鼠标美化
1.先去找鼠标样式
致美化里面有很多鼠标样式,可以去找一个喜欢的样式,下载后右键安装即可在本地使用,如果要插入博客中使用,需要将样式上传到自己的服务器
我电脑使用的 刻晴 样式
小站使用的ArcStarry样式
个人觉得比较好看
2.上传鼠标到服务器
找到光标文件,上传到个人服务器,博客园是支持上传文件的,可以上传到博客园,推荐上传到自己服务器,七牛云之类的服务器有免费额度,可以试试
设置域名,拿到外链
3.在博客中插入鼠标样式代码
Hexo鼠标美化:
在主题的yaml文件中,使用Inject插入额外样式
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
- <link rel="stylesheet" href="/css/font.css">
- <link rel="stylesheet" href="/css/background.css">
- <link rel="stylesheet" href="/css/mouse.css">
- <meta name="referrer" content="no-referrer">
bottom:
# <script src="/js/jquery.js"></script>
# <script src="https://unpkg.com/@waline/client@v2/dist/waline.mjs"></script>
在css文件夹中添加需要的光标样式
body {
cursor: url(https://XX/ArcStarry/Blue/Arrow.cur), default; }
button,a{
cursor: url(https://XX/Blue/Hand.cur), pointer; }
textarea,input:focus{
cursor:url(https://XX/IBeam.cur), text; }
博客园鼠标美化:
在额外css样式添加需要的光标
body { cursor: url(https://XX/Arrow.cur), default; }
button,a{ cursor: url(https://XX/Hand.cur), pointer; }
input{ cursor:url(https://XX/Help.cur), text; }
textarea,input:focus{ cursor:url(https://XX/IBeam.cur), text; }
附录:
常见的光标类型 :
值 | 描述 |
---|---|
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 | 此光标指示可用的帮助(通常是一个问号或一个气球)。 |
查看 菜鸟教程 演示
光标样式图:
PS:WordPress可以在插件市场搜索cursor(鼠标)相关的插件,在ui界面自定义鼠标样式。
评论
匿名评论隐私政策