何时悟道 WHEN WILL I AWAKEN
何时悟道 WHEN WILL I AWAKEN
关于我
悬停出镜片 · 点按或 F 换语言 按住拖动出镜片 · 轻点换语言
镜片不是滤镜,也不是同一句话换色:底层画的是中文黑字(+ 5% 黑网格),上层画的是英文白字(+ 12% 白网格), 两套内容各自独立存在,只用一个 clip-path 圆把上层露出来。 所以镜片里那行 WHEN WILL I AWAKEN 是和「何时悟道」并列的另一层 h1,不是反色算出来的。
英文怎么来的:悟 取 awaken(顿悟、醒觉),道 不另译 —— 英文里 the Way 太直白, 收进 awaken 这个动作里反而更贴原意,于是整句落在 WHEN WILL I AWAKEN;想更古雅可换 WHEN SHALL I AWAKEN。
两个容易被忽略的细节:镜片里那层 W U D A O 网格比外面小一号(32px vs 52px、12% 白 vs 5% 黑), 边缘因此出现密度突变,眼睛会先读到“这是两层”再看标题;遮罩是两圆外切的胶囊,快速甩动时被拉成水滴、停住回弹成圆形。
字号怎么定的:4 个汉字只占 4em,17 个字符要占 9.4em —— 同字号下英文得宽出 2.3 倍, 一行装不下,只能压到中文的 0.55 倍,再往上就顶到画布边了。
对位为什么改成居中:原版中英宽度只差 7.4%,所以能用「右端对齐」让切换时右边界纹丝不动; 这里宽度差 72%,再右端对齐会让英文左边空出一大截,看着反而像没对齐。 改成整行居中,水平垂直都按矩形中心对齐,左右留白对称。
四种切换:铺满 镜片涨到盖住整块画布; 光圈 镜片缩成一个点再张开(换层发生在看不见的瞬间); 翻牌 整行字绕 Y 轴转到侧对屏幕再转回来;硬切 就是 0ms 直接换。