
距离我上一次改版,或是从头设计博客,已经过去了十几年。这几天我花了点功夫,慢慢重新设计它。因为有了 AI 的加持,整个设计过程全部是 Vibe Coding,我没有写一行代码,甚至包括你现在看到的内容,也是由一整套 AI 流程生成的。导航和头像部分我花了大量精力表达我的想法,刚好就让 AI 来帮我写下这一整套过程吧。
最近我给博客顶部导航做了一次小改动。它不是功能上的大变化,导航还是那几个链接:博客首页、日志存档、新用户请进、我的原则、我的愿望清单、关于我。但我希望它不只是“能点”,而是在访问博客的第一秒,就传递出一点网站的气质——一种轻、柔、流动、有回应的气息。
一开始,我想给导航加一个动效。但仔细思考后,我意识到,它不只是动效的问题,更是一种哲学表达。我希望它能体现李小龙的理念:“Be Water”——水的状态,既顺势而动,又有包容力,既柔韧又能穿透。
这里的“水”,不是把导航染成蓝色,也不是加上明显的水波纹特效。太直白反而俗。我的想法更接近意境:当鼠标触碰导航时,它像轻轻触到了一条水平面——文字微微上浮,下面出现像小水滴一样的点,水线被轻轻触动,一滴水落下,沿着线缓缓流走。这不仅是视觉效果,更是一种哲学体验:微小动作也能带来流动与回应,正如生活中顺势而为的智慧。
这个效果,我拆成了几个部分来实现。
阅读全文



