自搭网站UI设计

1 效果

1.1 主页面：

1.2 六个子模块页面：

1.2.1 灵感

1.2.2 系统化自学

1.2.3 超好玩的

1.2.4 作品集

1.2.5 悟出了

1.2.6 联系

1.3 内容页面：

---

2 相关技术点

（1）语言：html,css,js。

（2）typed.js打字动画库。

（3）音乐波形可视化：js + <canvas>。

3 灵感来源

3.1 网站配色

以棕、香芋紫、淡绿和暖黄为主调，前三种颜色来源于我的沐浴套装配色（此idea接轨于灵感模块第一条）， 以暖黄作为内容背景色纯粹是因为我想护眼哈哈哈（没想到和棕色背景搭配起来这么舒服！）

ps：其实刚开始试色的时候觉得棕色土（像粑粑来着），但后面把按钮和内容等颜色也配上的时候是越看越好看！越看越舒服！越看越喜欢！ 直到把暖黄色配上后我忽然意识到为什么这么喜欢这四种颜色配一起了，因为它们像夹心巧克力（真的超爱，不夹心也爱）！！！

3.2 3D边框

想象我的网站是一个宝藏箱，里面装着我的宝藏知识，既然是箱子，该是立体的、有边框的嘿嘿。

3.3 音频可视化

在主页面布置音乐+波形图，除了我喜欢听歌（氛围感超赞）之外，还有一个启发点是我在steam的壁纸引擎上下载的一个动态壁纸， 每次放歌或电脑有声音时它的音频可视化区域都会随着节奏进行动画，可酷可酷了。

3.4 按钮形状

原先设置的按钮只是2维平面（悬浮变色），后面想给页面增添立体感，就给它们加上了立体边框和阴影（迎合整体页面的”箱子“思路）， 发现好像我心爱的机械键盘，觉得这设计简直yyds!

3.5 打字动画

主页面的“hi~欢迎来到yddblog~”设置成打字动画效果主要是我想再主页面放点会动的东西（不然太死板了）， 刷抖音刷到一个博主介绍到typed.js这个动画库，觉得不错就试了试，效果不错。