我们喜欢的网站：MD Nichrome

这个令人惊叹的网站展示了大众驱动程序的MD壁画字体。聪明的动画和图形突出了其功能。

这些动画利用了样式<video></video>元素。

该设计包括微妙但有效的细节，例如褪色，尾随的字母。这是通过CSS： white-space: nowrap; ， overflow: hidden; ，以及线性梯度掩模会产生淡出效果。这巧妙地将CSS梯度用作浏览器生成的图像。

 H1 {
  白色空间：nowrap;
  溢出：隐藏；
  -webkit bumask-image：线性级别（向右，黑色75％，透明）；
}

该站点还巧妙地展示了字体的Opentype功能（分数，替代字母）。悬停使用font-feature-setting: unset; 。

 。元素 {
  Font-Feature设定：Unset;
}

但是，最迷人的方面是背景。模仿纸张的质地的闪闪发光的动画被渐变覆盖。这种微光是PNG图像。 background-position会产生动画效果。微妙的模糊性增加了独特的纹理。

正如设计师Rutherford的热潮所解释的那样，使用基于Bézier曲线的方法实现了光滑的背景梯度。他开发了一种工具来生成这些梯度，解决了线性梯度中常见的“灰色死区”问题。他的工具可以更好地控制颜色插值。

另一个值得注意的功能是粘性导航。最初隐藏，它出现在滚动上，增强了对排版的关注。 CSS粘性定位可以优雅地实现：

 .Sticky-thing {
  位置：粘性；
  顶部：75px;
}

简约的设计，优先考虑版式，创造了专注且整洁的用户体验，与许多分散注意力的网站形成了鲜明的对比。

以上是我们喜欢的网站：MD Nichrome的详细内容。更多信息请关注PHP中文网其他相关文章！