转载自:https://itrhx.blog.csdn.net/article/details/85010191
文章目录
【01】添加卡通人物(看板娘)
【02】添加鼠标点击爱心效果
【03】添加鼠标点击显示字体效果
【04】添加鼠标点击烟花爆炸效果
【05】自定义鼠标指针样式
【06】添加彩色滚动变换字体
【07】添加背景音乐
【08】浏览器网页标题恶搞
【09】背景添加动态线条效果
【10】添加人体时钟等有趣的挂件
【11】添加网站雪花飘落效果
【12】添加背景动态彩带效果
【13】添加背景代码雨特效
------------------------------------------------------------------------------------------------------------------------------------
【01】添加卡通人物(看板娘)
我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物,还能根据你鼠标位置摇头,瞬间被吸引到了,赶紧也给自己博客添加一个吧!点击此处(https://github.com/EYHN/hexo-helper-live2d)进入该项目地址
输入如下命令获取 live2d :
输入以下命令,下载相应的模型,将 packagename 更换成模型名称即可,更多模型选择请点击此处,各个模型的预览请访问原作者的博客
打开站点目录下的 _config.yml 文件,添加如下代码:
设置好过后我们就拥有了一个卡通人物
【02】添加鼠标点击爱心效果
在 \themes\hexo-theme-spfk\source\js 下新建文件 love.js,在 love.js 文件中添加以下代码:
在 \themes\hexo-theme-spfk\layout\layout.ejs 文件末尾添加以下代码:
完成以上操作后,当我们点击鼠标的时候就可以看见爱心的特效了
【03】添加鼠标点击显示字体效果
在 /themes/hexo-theme-spfk/source/js 下新建文件 click_show_text.js,在 click_show_text.js 文件中添加以下代码:
其中的社会主义核心价值观可以根据你自己的创意替换为其他文字
如果想要每次点击显示的文字为不同颜色,可以将其中 color 值进行如下更改:
然后在 \themes\hexo-theme-spfk\layout\layout.ejs 文件末尾添加以下代码:
最终实现效果如下:
【04】添加鼠标点击烟花爆炸效果
在 \themes\material-x\source\js 目录下新建一个 fireworks.js 的文件,里面写入以下代码:
然后在 \themes\material-x\layout\layout.ejs 文件中写入以下代码:
最终效果:
【05】自定义鼠标指针样式
在 \themes\material-x\source\less\_base.less 文件 body 样式里写入如下代码:
鼠标指针可以用 Axialis CursorWorkshop 这个软件自己制作,不同主题具体放的文件有所不同,确保在博客主体 body 的 CSS 文件中即可,其中的鼠标指针链接可替换成自己的,首先尝试加载https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.1.6/images/mouse.cur ,如果该文件不存在或由于其他原因无效,那么 auto 会被使用,也就是自动默认效果,图片格式为.ico、.ani、.cur,建议使用.cur,如果使用.ani或者其他格式无效,原因是浏览器兼容问题,请阅读参考文档或者参考以下兼容表:
【06】添加彩色滚动变换字体
在你想要添加彩色滚动变换字体的地方写入以下代码即可,其中文字可自行更改:
最终效果:
【07】添加背景音乐
打开网页版网易云音乐(https://music.163.com/),选择你准备添加的背景音乐,点击生成外链播放器,前提是要有版权,不然是无法生成外链播放器的,复制底下的HTML代码
然后将此代码放到你想要放的地方,比如放在博客的左侧,则打开 \themes\hexo-theme-spfk\layout\_partial\left-col.ejs 文件,将复制的HTML代码粘贴进去,再进行适当的位置设置让播放器更美观,其中 auto=1 表示打开网页自动播放音乐,auto=0 表示关闭自动播放音乐
最后效果如下:
这种网易云音乐外链的方式有很多局限性,因此推荐使用aplayer,GitHub地址为:https://github.com/MoePlayer/APlayer ,参考教程:https://blog.yleao.com/2018/0902/hexo%E4%B8%8A%E7%9A%84aplayer%E5%BA%94%E7%94%A8.html
【08】浏览器网页标题恶搞
当用户访问你的博客时点击到了其他网页,我们可以恶搞一下网页标题,呼唤用户回来,首先在目录 \themes\material-x\source\js 下新建一个 FunnyTitle.js 文件,在里面填写如下代码:
其中 funny.ico 是用户切换到其他标签后你网站的图标,favicon.ico 是正常图标,然后在 \themes\material-x\layout\layout.ejs 文件中添加如下代码:
再次部署博客后就可以看见标题搞笑的效果了:
【09】背景添加动态线条效果
在 \Hexo\themes\hexo-theme-spfk\layout\layout.ejs 文件中添加如下代码:
其中:
color:表示线条颜色,三个数字分别为(R,G,B),默认:(0,0,0)
opacity:表示线条透明度(0~1),默认:0.5
count:表示线条的总数量,默认:150
zIndex:表示背景的z-index属性,css属性用于控制所在层的位置,默认:-1
最终实现效果:
【10】添加人体时钟等有趣的挂件
无意中发现了个有趣的人体时钟 HONE HONE CLOCK,作者是个日本人,点击此处(http://chabudai.org/blog/)访问作者博客,点击此处(http://chabudai.org/blog/?p=59)在作者原博客上查看动态样式,点击此处(http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf)查看动态大图,如果你的博客上有合适的地方,加上一个人体时钟会很有趣的
实现代码:
其他网页小挂件推荐:
http://abowman.com/ 里面有很多有趣的小挂件,可以养养鱼、龟、狗、仓鼠等各式各样的虚拟宠物,能根据你的鼠标指针位置移动,直接复制代码就可以用
http://www.revolvermaps.com/ 它提供网站访客地理信息,可以以2D、3D等形式显示
http://www.amazingcounters.com/ 免费网站计数器,有非常多的样式供你选择,可以设置计数器初始数值,可以设置按访问量计数,也可以按独立访问者计数
https://www.seniverse.com/widget/get 心知天气提供基于Web的免费天气插件,可以为你的网站添加一项简洁美观的天气预报功能,并自动适配PC和手机上的浏览
【11】添加网站雪花飘落效果
样式一和样式二分别如下:
实现方法:在 \Hexo\themes\hexo-theme-spfk\source\js 目录下新建一个 snow.js 文件,粘贴以下代码:
然后在 \Hexo\themes\hexo-theme-spfk\layout\layout.ejs 文件里引用即可:
如果没效果,请确认网页是否已载入JQurey,如果没有请在下雪代码之前引入JQ即可:
【12】添加背景动态彩带效果
样式一是鼠标点击后彩带自动更换样式,样式二是飘动的彩带:
实现方法:在 \themes\material-x\layout\layout.ejs 文件的body前面添加如下代码:
【13】添加背景代码雨特效
新建 DigitalRain.js,写入以下代码:
在主题文件的相关css文件中(以 Material X 1.2.1 主题为例,在\themes\material-x-1.2.1\source\less\_main.less 文件末尾)添加以下代码:
然后在主题的 layout.ejs 文件中引入即可:
最终效果:
代码来源:http://www.lxl8800.cn/Main/Resource