8、Fluid美化

一、引入CSS/JS(最基本)

在themes\fluid\source\css\文件夹下建一个文本文档，找到一段可用的css美化代码。

然后打开主题配置文件/themes/fluid/_config.yml找到custom_js和custom_css下面进行引入。

1
2
3
4
5
6
7
8
9
custom_js:
  - /js/diy/timeDate.js
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js  #/APlayer#/APlayer依赖
  - //cdn.jsdelivr.net/gh/metowolf/[email protected]/dist/Meting.min.js  #/APlayer依赖
# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
  - /css/diy/shubiao.css #鼠标指针
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css   #/APlayer依赖

二、JS特效

动态彩带

一、引入CSS/JS(最基本)

在themes\fluid\source\css\文件夹下建一个文本文档，找到一段可用的css美化代码。

然后打开主题配置文件/themes/fluid/_config.yml找到custom_js和custom_css下面进行引入。

1
2
3
4
5
6
7
8
9
custom_js:
  - /js/diy/timeDate.js
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js  #/APlayer#/APlayer依赖
  - //cdn.jsdelivr.net/gh/metowolf/[email protected]/dist/Meting.min.js  #/APlayer依赖
# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
  - /css/diy/shubiao.css #鼠标指针
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css   #/APlayer依赖

二、JS特效

动态彩带

1
- //cdn.jsdelivr.net/gh/bynotes/texiao/source/js/caidai.js # 动态彩带

黑色线条

1
- //cdn.jsdelivr.net/gh/bynotes/texiao/source/js/xiantiao.js # 动态黑色线条

动画

静态彩带点击改变形状

1
- //cdn.jsdelivr.net/gh/bynotes/texiao/source/js/jingtaisidai.js

​ 动画1·

小雪花效果

1
- //cdn.jsdelivr.net/gh/bynotes/texiao/source/js/xiaoxuehua.js

动画2

大雪花效果

1
- //cdn.jsdelivr.net/gh/bynotes/texiao/source/js/daxuehua.js

动画3

鼠标跟随小星星

1
- //cdn.jsdelivr.net/gh/bynotes/texiao/source/js/xiaoxingxing.js

动画4

滚动条样式

1
- //cdn.jsdelivr.net/gh/bynotes/texiao/source/css/gundongtiao.css

image-20240125233235711

鼠标样式

1
- //cdn.jsdelivr.net/gh/bynotes/texiao/source/css/shubiao.css

image-20240125233343214image-20240125233349224

三、其他样式效果

ToDo……

四、添加动态小猫、小狗、动漫人物（待续……）

ToDo……