☁️贺州阴18~24℃北京 16/7℃上海 23/16℃广州 31/22℃深圳 31/22℃杭州 22/15℃成都 21/13℃全国天气 »登录

个人博客主题模板给鼠标添加跟随特效教程

李洋博客 2022-02-09 11:08 11 次阅读 807 字

昨天写了一个网页鼠标特效的小玩具,当然代码不是我的,源自知更鸟, 插件 也很简单,但是考虑到不是所有人都喜欢用插件,包括我自己,所以今天抽空在写一个详细的 教程 ,直接把代码写在主题里就不需要额外的开启插件了,代码都是一样的,只是稍微修改了一些,感谢作者,好了不废话了,教程如下。

最后的那段代码的含义是在屏幕小于1023像素的时候隐藏这个特效,为什么呢?因为我在本地测试的时候发现,在移动端打开页面之后这个特效的鼠标会默认的停留在顶部左侧的位置,所以我就隐藏了,喜欢保留的可以删除最后那一段。

另外需要不喜欢默认的鼠标颜色可以自行替换修改,

“ .cursor-inner ”中“background:#999999;”为中心圆点的颜色代码。

“ .cursor-outer ”中“border: 2px solid #999999;”为外圆的颜色和2px标签边界像素。

“ .cursor-inner.cursor-hover ”中“background:#999999;”就是选中时的背景色。

以上颜色和边距可根据网站配色自行修改, css代码设 置完成后,我们在主题设置中找到广告设置(脚本代码接口)或者统计接口,复制和粘贴如下代码:

设置完成后,保存,后台首页,清空缓存编译即可,如果是其他类型的程序,直接放在把css代码放在样式文件中,把js代码放在footer中就可以了,看了下基本上不会跟主题的代码有任何的冲突,如果是修改源代码的话记得备份,免费出错导致网站出错。

PS:关于鼠标特效网上的教程也是五花八门的,但是总体来说都是为网站锦上添花的操作,我比较喜欢简介的,所以没设置一些花里胡哨的特效,会让我觉得喧宾夺主,好了,仅是个人看好,这次教程文章完成了,继续更新主题模板啦,有问题留言反馈。

2022虎年第一款免费插件鼠标跟随特效献上

冰墩墩太火了,一墩难求?Bloger用css方式呈现一人一墩

↑