我們喜歡的網站：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中文網其他相關文章！