我非常喜歡賽博朋克2077官網的設計風格，是以本篇文章主要以2077官網為例，通過幾個例子，依次實作賽博朋克風格元素效果。
文章開始之前先簡單了解下什麼是 <code>賽博朋克</code>，以及什麼是 <code>賽博朋克2077</code>。
賽博朋克（Cyberpunk）是“控制論、神經機械學”與“朋克”的結合詞，背景大都建立于“低端生活與高等科技的結合”，擁有先進的科學技術，再以一定程度崩壞的社會結構做對比；擁有五花八門的視覺沖擊效果，如街頭的霓虹燈、街排标志性廣告以及高樓建築等，通常搭配色彩是以黑、紫、綠、藍、紅為主。其中菲利普·狄克所著作的《仿生人會夢到電子羊嗎？》最受注目，小說亦被改編成電影《銀翼殺手》。總的來講，賽博朋克的風格主線，就是反應出科技高度發展的人類文明，與脆弱渺小的人類個體之間的強烈反差，同時外界與内在，鋼鐵與肉體，過去與未來，現實與虛幻等沖突在其中交織。
<code>《賽博朋克2077》</code> 是一款動作角色類遊戲，于 <code>2020年12月10日</code> 登陸各大遊戲平台。故事發生在夜之城，權力更疊和身體改造是這裡不變的主題。玩家将扮演一名野心勃勃的雇傭兵：<code>V</code>，追尋一種獨一無二的植入體——獲得永生的關鍵。它以自由的探索性，較高的操控度以及驚豔的視覺特效收獲了一大批玩家。我非常喜歡 <code>2077</code> 官網的設計風格，是以本篇文章主要以 <code>2077</code> 官網為例，通過幾個例子，依次實作賽博朋克風格元素效果。
首先我們來看一下 <code>2077</code> 中文官網首頁，頁面主要以醒目的 <code>明黃色</code> 為主色調，并小面積使用它的對比色 <code>淡藍色</code>、<code>玫紅色</code> 的色塊作為點綴，文本和線條邊框使用 <code>純黑色</code>。這一步實作非常簡單，我們在實作賽博朋克風格的頁面時，可以使用上面提到的 <code>黑、紫、綠、藍、紅</code> 為主色調，再以它們的對比色作為按鈕、文本提示框，可以實作強烈的視覺沖擊。
故障效果是一種顯示裝置崩壞效果，在 <code>2077</code> 官網中應用很多，我們先來實作 <code>button</code> 在 <code>hover</code> 時産生故障效果。
故障效果主要通過 <code>clip-path: inset</code> 和動畫實作。利用 <code>button</code> 的僞元素 <code>::after</code>，給它定義多個分片 <code>--slice</code> 變量，并通過動畫切換切片的位置，來實作晃動效果。其中<code>clip-path</code> 屬性使用裁剪方式建立元素的可顯示區域。區域内的部分顯示，區域外的隐藏。 <code>inset()</code> 方法用于定義一個矩形，可以傳入 <code>5</code> 個參數，分别對應 <code>top</code>，<code>right</code>，<code>bottom</code>，<code>left</code>的裁剪位置及 <code>round</code> 和 <code>radius</code>（可選，圓角），它的基本文法如下：
完整實作：
故障效果同樣可以應用在文本、圖檔、視訊等媒體展示上，營造滿滿的科技氛圍。這部分内容來看看如何實作故障風格的圖檔展示效果。
<code>.glitch</code> 是為圖檔展示容器主體，它的子元素 <code>glitch__item</code> 用來表示故障條，與上例中 <code>::after</code> 僞元素作用類似。
故障風格圖檔和故障風格按鈕實作思路基本類似，不過這次用到了 <code>clip-path: polygon</code> 實作，<code>polygon</code> 用于裁切多邊形的方法，它的每對值表示裁切元素的坐标。 <code>background-blend-mode</code> 屬性定義了背景層的混合模式。由于文章篇幅有限，以下代碼隻展示了一個故障條的動畫，完整例子可檢視文章末尾對應連結 <code>🔗</code>：
在賽博朋克場景中，如電影《銀翼殺手》《機殼特工隊》、遊戲《看門狗》《賽博朋克2077》中無論是在廢棄的建築物 <code>🏠</code>、還是繁華的歌舞町 <code>⛩️</code> ，都存在大量的霓虹 <code>neon</code> 元素。我們同樣可以使用大量霓虹元素來裝飾頁面，比如頁面标題、按鈕、表單邊框等都可以使用霓虹效果，下面是霓虹文字實作的簡要示例：
<code>.neon</code> 和 <code>.flux</code> 兩個元素是兩個文本載體，将被應用不同的霓虹效果樣式和動畫。
文字的霓虹效果主要通過 <code>text-shadow</code> 屬性實作，閃爍效果也是通過添加與文字顔色相近的 <code>text-shadow</code> 動畫來實作，其中 <code>.neon</code> 元素被應用了 <code>ease-in-out</code> 運動曲線， <code>.flux</code> 元素被應用了 <code>linear</code> 運動曲線，可以看出兩者之間的差别嗎。<code>😂</code>
為了使文字看起來更有霓虹效果，以上示例使用了 <code>neon</code> 字型：https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf
賽博朋克2077中可以看到很多文本展示框都是這種不規則圖形的，是不是很酷呢，這部分内容将介紹如何實作 <code>2077</code> 風格的文本框。
上面 <code>3</code> 個文本框分别由<code>3</code> 個 <code>p</code> 标簽構成，<code>.inverse</code> 類表示反色背景，<code>.dotted</code> 将實作點狀背景。
文本框不規則的形狀主要由 <code>clip-path: polygon</code> 實作，通過以下幾個坐标的裁切，就可以實作 <code>2077</code> 風格的多邊形了。
完整代碼：
<code>2077</code> 的表單也很有特色，輸入框元素 <code>input</code> 和 <code>textarea</code> 同樣可以使用 <code>clip-path: polygon</code> 實作不規則形狀，單選框和多選框則可以利用僞元素<code>:before</code>、<code>:after</code> 進行裝飾。
完整實作如下：
賽博朋克風格網頁在文本展示中，常常用到如下圖所示的 <code>輸入光标閃爍</code> 樣式及螢幕 <code>故障風格</code> 的樣式，我們可以統一為 <code>h1</code> - <code>h5</code> 标題，<code>hr</code> 等元素增加下劃線裝飾和故障動畫效果，下面來看看如何實作這樣的文字效果的。
在 <code>賽博朋克2077</code> 的網頁裡，為了突顯科技感，很多頁面元素都具有金屬質感，如模态彈窗的背景、文本展示塊的邊框等。這部分内容看看如何實作簡單的金屬材質背景。
4個 <code>button</code> 元素，将被分别添加 <code>金、銀、銅、钛</code> 的金屬背景色效果。
實作金屬光澤效果，主要以下幾個個<code>css</code> 屬性：
<code>box-shadow</code>：增加陰影，突出立體質感。
<code>background: radial-gradient</code>：徑向漸變，添加底部陰影。
<code>background: linear-gradient</code>：線性漸變，主色調背景。
<code>background: conic-gradient</code>：圓錐漸變，最終反光金屬效果。
依次添加以上三種漸變如下圖所示：
示例完整實作代碼：
結合 <code>3</code> 種漸變，還能創造出更多複雜好看的金屬材質效果，完整代碼可預覽文章尾部的對應連結 <code>🔗</code>。
除了上述幾個方面，還有哪些賽博朋克風格的元素是值得我們學習的呢？通過以下幾點，也可以提升網頁的科技藝術感和使用者體驗，你有沒有更好的想法呢？<code>😊</code>
使用扁平、像素化字型；
科技感滿滿的頁面加載動畫、滾動動畫、滾動條；
中/日/英混雜的文案突出未來世界的文化融合；
根據滑鼠移動增加透視效果，可以看我另一篇文章 <code>《如何在CSS中映射的滑鼠位置，并實作通過滑鼠移動控制頁面元素效果》</code>。
...
故障圖檔效果示例完整版 https://codepen.io/dragonir/full/oNZPLzo
複雜的金屬效果 https://codepen.io/dragonir/full/jOBvrZP
标題文本 https://codepen.io/dragonir/full/vYxzwGG
賽博朋克404頁面 https://codepen.io/ltrademark/pen/xpgprZ
作者：dragonir 本文位址：https://www.cnblogs.com/dragonir/p/14878001.html