如何在CSS中自定义自己博客的鼠标样式?

转载 天真网    2018-01-31 10:23:20  287 人阅读  26 条评论

今天来到天真网的朋友,可能会发现不一样的地方,那就是本站的鼠标样式换了。嘿嘿,这个是天真特意换的,毕竟默认的鼠标样式太死板不是!如果你也想和天真一样,想对自己博客的默认鼠标样式进行美化,那么请继续往下看吧!

如何在CSS中自定义自己博客的鼠标样式? - 第1张 - boke112联盟(boke112.com)

第一步:大家要去找两个比较好看的鼠标指针(博客中一般也就是用到默认鼠标和点击链接的鼠标样式)。你也可以下载本站使用的,或者直接前往系统之家分享的 1067 个鼠标指针挑选(点此直达访问其他鼠标指针的样式)。

注意:一般是 cur 格式的(ani 格式的不起作用),当然你选择 png 格式也行,有能力的完全也可以自己 ps 两个。

第二步:将所需鼠标指针下载到本地然后上传到你的网站,比如存放在主题文件 images 文件夹中。(路径可以随意,等第三步记得填写正确的路径即可)。

第三步:这里也以 WP 博客为例,其他博客自行修改样式表即可。进入 WP 博客后台,点击外观 >> 编辑(一般默认都是正在使用主题的 style.css 样式)>> 把以下代码添加到 style.css 文件中更新保存即可。

  1. /** 鼠标样式 开始**/
  2. /** 普通指针样式**/
  3. body {cursorurl(http://tzw520.cn/wp-content/themes/Blogs/images/Arrow.cur), default;}
  4.  /** 链接指针样式**/
  5. a:hover{cursor:url(http://tzw520.cn/wp-content/themes/Blogs/images/help.cur), pointer;}
  6. /** 鼠标样式 结束**/
注意:记得修改以上代码的鼠标指针路径哦。

第四步:清空浏览器缓存,更新缓存插件和 CDN 的 style.css 文件的缓存,这样就大功告成了,在博客网站前台就可以看到我们鼠标已经变得更漂亮更有个性了。

拓展阅读

本文只分享了默认鼠标和链接鼠标的样式,而我们一般下载的鼠标指针都包含了很多种情况下的鼠标指针,所以如果想要在博客网站上显示整套的鼠标指针,那么只需要根据需要按照上述添加链接鼠标指针的方法添加相应的 CSS 代码即可。具体鼠标指针的值如下:

如何在CSS中自定义自己博客的鼠标样式? - 第2张 - boke112联盟(boke112.com)

以上各个值对应的鼠标指针样式请移步体验:鼠标指针变化

来源:天真网

您可能感兴趣的文章

文章标签: ,   ,   ,  
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为转载文章,来源于 天真网 ,版权归原作者所有!转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请与老古(QQ:2226524923)联系,老古将及时更正、删除,谢谢!
©boke112联盟,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机
转载砖家

 发表评论

大笑表情偷笑表情鼓掌表情思考表情疑问表情抠鼻表情抓狂表情晕表情黑线表情流汗表情流泪表情囧表情衰表情围观表情OK表情牛表情

  1. Monicfenga
    Monicfenga @回复

    说实在的,这个“自定义鼠标样式”其实挺“恼人”的(至少是我觉得)
    且很庆幸,不止我一个人这么认为

  2. 水云间
    水云间 @回复

    正式应用环境下还是最好不要随意改变鼠标样式的好。

  3. 面料
    面料 @回复

    蛮有个性的

  4. 来语直搜
    来语直搜 @回复

    想起那个谈论“特效”代码的年代,曾经觉得“这么神奇!”。

  5. 90客栈
    90客栈 @回复

    我觉的没必要搞这么花哨吧

  6. 江西养牛人
    江西养牛人 @回复

    个人喜欢吧,我还是觉得默认的耐看,但是能够有一些个性化的我也觉得可以接受,这样才能突出博主的个性所在

    • 懿古今
      懿古今2018-02-01 11:51  回复

      @江西养牛人是的,关键是看个人,喜欢个性化就折腾,去找一个自己喜欢的鼠标指针,然后就可以美化了。

  7. 米扑博客
    米扑博客 @回复

    赞,漂亮

  8. 蝈蝈要安静
    蝈蝈要安静 @回复

    额,每次浏览自定义鼠标样式的网站都觉的很别扭。

  9. 西枫里博客
    西枫里博客 @回复

    这很狂放~ [偷笑]

  10. 金选网赚博客
    金选网赚博客 @回复

    这个很酷啊

  11. 银色月航
    银色月航 @回复

    都收采用默认的,很少diy

  12. 网赚博客
    网赚博客 @回复

    支持一下!

  13. 明月登楼
    明月登楼 @回复

    这个我总是感觉网站定制属于自己的鼠标样式很Low的感觉!

  14. Mr.li
    Mr.li @回复

    不是我不想,真觉得不比原始的鼠标好看

  15. 值品分享
    值品分享 @回复

    没有必要吧,这个。

  16. 网贷口子
    网贷口子 @回复

    这个可以有 [赞] [亲亲]

  17. 玉苏子
    玉苏子 @回复

    这个不错

  18. 沈唁志
    沈唁志 @回复

    666 我去换个滑稽的试试

  19. 风紧扯乎
    风紧扯乎 @回复

    学习了,不过我还是比较喜欢默认的样式,虽然B格不高吧,但是很实用