实验室

文字

标题处理、逐字进场、可变字体的花活。一个页面的气质大半由文字决定,而这大半又只用到三四个属性。

流光标题

一条渐变在字母后面滑动,裁进字形里。三个 CSS 属性就是全部;真正要拿捏的是缓动函数和渐变在哪儿接缝。

  • Gradient 100deg, 6 stops, first = last
  • background-size 320% 100%
  • Duration 8s linear infinite

逐字错峰入场

每个字从自己的遮罩里升起来,间隔 26ms。真正要拿捏的全在「怎么拆」:按词拆,文字才还能换行;补一个 aria-label,读屏才不会一个字母一个字母地念。

  • Stagger 26ms per character
  • Duration 620ms
  • Easing cubic-bezier(0.16, 1, 0.3, 1)
全部分类