僅用CSS幾步實現賽博朋克2077風格視覺效果

Dragonir發表於2021-06-12

背景

文章開始之前先簡單瞭解下什麼是 賽博朋克，以及什麼是 賽博朋克2077。

賽博朋克（Cyberpunk）是“控制論、神經機械學”與“朋克”的結合詞，背景大都建立於“低端生活與高等科技的結合”，擁有先進的科學技術，再以一定程度崩壞的社會結構做對比；擁有五花八門的視覺衝擊效果，如街頭的霓虹燈、街排標誌性廣告以及高樓建築等，通常搭配色彩是以黑、紫、綠、藍、紅為主。其中菲利普·狄克所著作的《仿生人會夢到電子羊嗎？》最受注目，小說亦被改編成電影《銀翼殺手》。總的來講，賽博朋克的風格主線，就是反應出科技高度發展的人類文明，與脆弱渺小的人類個體之間的強烈反差，同時外界與內在，鋼鐵與肉體，過去與未來，現實與虛幻等矛盾在其中交織。

《賽博朋克2077》 是一款動作角色類遊戲，於 2020年12月10日 登陸各大遊戲平臺。故事發生在夜之城，權力更迭和身體改造是這裡不變的主題。玩家將扮演一名野心勃勃的僱傭兵：V，追尋一種獨一無二的植入體——獲得永生的關鍵。它以自由的探索性，較高的操控度以及驚豔的視覺特效收穫了一大批玩家。我非常喜歡 2077 官網的設計風格，因此本篇文章主要以 2077 官網為例，通過幾個例子，依次實現賽博朋克風格元素效果。

實現

高對比度

首先我們來看一下 2077 中文官網首頁，頁面主要以醒目的 明黃色 為主色調，並小面積使用它的對比色 淡藍色、玫紅色 的色塊作為點綴，文字和線條邊框使用 純黑色。這一步實現非常簡單，我們在實現賽博朋克風格的頁面時，可以使用上面提到的 黑、紫、綠、藍、紅 為主色調，再以它們的對比色作為按鈕、文字提示框，可以實現強烈的視覺衝擊。

故障風格按鈕

故障效果是一種顯示裝置崩壞效果，在 2077 官網中應用很多，我們先來實現 button 在 hover 時產生故障效果。

<button>立即加入</button>

故障效果主要通過 clip-path: inset 和動畫實現。利用 button 的偽元素 ::after，給它定義多個分片 --slice 變數，並通過動畫切換切片的位置，來實現晃動效果。其中clip-path 屬性使用裁剪方式建立元素的可顯示區域。區域內的部分顯示，區域外的隱藏。 inset() 方法用於定義一個矩形，可以傳入 5 個引數，分別對應 top，right，bottom，left的裁剪位置及 round 和 radius（可選，圓角），它的基本語法如下：

inset( <length-percentage>{1,4} [ round <border-radius> ]? )
clip-path: inset(2em 3em 2em 1em round 2em);

完整實現：

button, button::after {
  width: 300px;
  height: 86px;
  font-size: 40px;
  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
  border: 0;
  color: #fff;
  letter-spacing: 3px;
  line-height: 88px;
  box-shadow: 6px 0px 0px #00E6F6;
  outline: transparent;
  position: relative;
}
button::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  content: '立即加入';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
}
button:hover::after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}
@keyframes glitch {
  0% { clip-path: var(--slice-1); transform: translate(-20px, -10px); }
  10% { clip-path: var(--slice-3); transform: translate(10px, 10px); }
  20% { clip-path: var(--slice-1); transform: translate(-10px, 10px); }
  30% { clip-path: var(--slice-3); transform: translate(0px, 5px); }
  40% { clip-path: var(--slice-2); transform: translate(-5px, 0px); }
  50% { clip-path: var(--slice-3); transform: translate(5px, 0px); }
  60% { clip-path: var(--slice-4); transform: translate(5px, 10px); }
  70% { clip-path: var(--slice-2); transform: translate(-10px, 10px); }
  80% { clip-path: var(--slice-5); transform: translate(20px, -10px); }
  90% { clip-path: var(--slice-1); transform: translate(-10px, 0px); }
  100% { clip-path: var(--slice-1); transform: translate(0); }
}

故障風格圖片

故障效果同樣可以應用在文字、圖片、視訊等媒體展示上，營造滿滿的科技氛圍。這部分內容來看看如何實現故障風格的圖片展示效果。

.glitch 是為圖片展示容器主體，它的子元素 glitch__item 用來表示故障條，與上例中 ::after 偽元素作用類似。

<div class="glitch">
  <div class="glitch__item"></div>
  <!-- ... -->
  <div class="glitch__item"></div>
</div>

故障風格圖片和故障風格按鈕實現思路基本類似，不過這次用到了 clip-path: polygon 實現，polygon 用於裁切多邊形的方法，它的每對值表示裁切元素的座標。 background-blend-mode 屬性定義了背景層的混合模式。由於文章篇幅有限，以下程式碼只展示了一個故障條的動畫，完整例子可檢視文章末尾對應連結 ?：

:root {
  --gap-horizontal: 10px;
  --gap-vertical: 5px;
  --time-anim: 4s;
  --delay-anim: 2s;
  --blend-mode-1: none;
  --blend-color-1: transparent;
}
.glitch {
  position: relative;
}
.glitch .glitch__item {
  background: url("banner.png") no-repeat 50% 50%/cover;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.glitch .glitch__item:nth-child(1) {
  background-color: var(--blend-color-1);
  background-blend-mode: var(--blend-mode-1);
  animation-duration: var(--time-anim);
  animation-delay: var(--delay-anim);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: glitch-anim-1;
}
@keyframes glitch-anim-1 {
  0% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
  4% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
  6% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
  8% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  10% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  12% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  14% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  16% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  18% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  20% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  21.9% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

霓虹元素

在賽博朋克場景中，如電影《銀翼殺手》《機殼特工隊》、遊戲《看門狗》《賽博朋克2077》中無論是在廢棄的建築物 ?、還是繁華的歌舞町 ⛩️ ，都存在大量的霓虹 neon 元素。我們同樣可以使用大量霓虹元素來裝飾頁面，比如頁面標題、按鈕、表單邊框等都可以使用霓虹效果，下面是霓虹文字實現的簡要示例：

.neon 和 .flux 兩個元素是兩個文字載體，將被應用不同的霓虹效果樣式和動畫。

<div class="neon">CYBER</div>
<div class="flux">PUNK</div>

文字的霓虹效果主要通過 text-shadow 屬性實現，閃爍效果也是通過新增與文字顏色相近的 text-shadow 動畫來實現，其中 .neon 元素被應用了 ease-in-out 運動曲線， .flux 元素被應用了 linear 運動曲線，可以看出兩者之間的差別嗎。?

.neon {
  text-shadow: 0 0 3vw #F4BD0A;
  animation: neon 2s ease-in-out infinite;
}
.flux {
  text-shadow: 0 0 3vw #179E05;
  animation: flux 2s linear infinite;
}
@keyframes neon {
  0%, 100% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    color: #FFFC00;
  }
  50% {
    text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
    color: #806914;
  }
}
@keyframes flux {
  0%, 100% {
    text-shadow: 0 0 1vw #10ff4c, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
    color: #03C03C;
  }
  50% {
    text-shadow: 0 0 .5vw #024218, 0 0 1.5vw #024713, 0 0 5vw #023812, 0 0 5vw #012707, 0 0 .2vw #022201, .5vw .5vw .1vw #011a06;
    color: #179E05;
  }
}

為了使文字看起來更有霓虹效果，以上示例使用了 neon 字型：https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf

不規則文字框

賽博朋克2077中可以看到很多文字展示框都是這種不規則圖形的，是不是很酷呢，這部分內容將介紹如何實現 2077 風格的文字框。

上面 3 個文字框分別由3 個 p 標籤構成，.inverse 類表示反色背景，.dotted 將實現點狀背景。

<p class="cyberpunk">經典的賽博朋克角色是邊緣且性格疏遠的獨行者。他們生活在社會群體的邊緣，一個瀰漫反烏托邦氛圍的未來：日常生活受到急劇改變的科技影響，普及的計算機化資訊籠罩全球，以及侵入性的人體改造。</p>
<p class="cyberpunk inverse">經典的賽博朋克角色是邊緣且性格疏遠的獨行者。他們生活在社會群體的邊緣，一個瀰漫反烏托邦氛圍的未來：日常生活受到急劇改變的科技影響，普及的計算機化資訊籠罩全球，以及侵入性的人體改造。</p>
<p class="cyberpunk inverse dotted">經典的賽博朋克角色是邊緣且性格疏遠的獨行者。他們生活在社會群體的邊緣，一個瀰漫反烏托邦氛圍的未來：日常生活受到急劇改變的科技影響，普及的計算機化資訊籠罩全球，以及侵入性的人體改造。</p>

文字框不規則的形狀主要由 clip-path: polygon 實現，通過以下幾個座標的裁切，就可以實現 2077 風格的多邊形了。

clip-path: polygon(
  0px 25px,
  26px 0px,
  calc(60% - 25px) 0px,
  60% 25px, 
  100% 25px, 
  100% calc(100% - 10px),
  calc(100% - 15px) calc(100% - 10px),
  calc(80% - 10px) calc(100% - 10px),
  calc(80% - 15px) 100%,
  80px calc(100% - 0px),
  65px calc(100% - 15px),
  0% calc(100% - 15px)
);

完整程式碼：

:root {
  --yellow-color: #f9f002;
  --border-color: #8ae66e;
}
.cyberpunk {
  padding: 5px;
  position: relative;
  font-size: 1.2rem;
  color: var(--yellow-color);
  border: 30px solid var(--yellow-color);
  border-right: 5px solid var(--yellow-color);
  border-left: 5px solid var(--yellow-color);
  border-bottom: 24px solid var(--yellow-color);
  background-color: #000;
  clip-path: polygon(0px 25px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 25px, 100% calc(100% - 10px), calc(100% - 15px) calc(100% - 10px), calc(80% - 10px) calc(100% - 10px), calc(80% - 15px) 100%, 80px calc(100% - 0px), 65px calc(100% - 15px), 0% calc(100% - 15px));
}
.cyberpunk.inverse {
  border: none;
  padding: 40px 15px 30px;
  color: #000;
  background-color: var(--yellow-color);
  border-right: 2px solid var(--border-color);
}
.dotted, .dotted:before, .dotted:after {
  background: var(--yellow-color);
  background-image: radial-gradient(#00000021 1px, transparent 0);
  background-size: 5px 5px;
  background-position: -13px -3px;
}
/* 文字框右側小編號樣式 */
.cyberpunk:before {
  content: "P-14";
  display: block;
  position: absolute;
  bottom: -12px;
  right: 25px;
  padding: 2px 2px 0px 2px;
  font-size: 0.6rem;
  line-height: 0.6rem;
  color: #000;
  background-color: var(--yellow-color);
  border-left: 2px solid var(--border-color);
}
.cyberpunk.inverse:before {
  content: "T-71";
  right: 90px;
  bottom: 9px;
}
.cyberpunk.inverse:before, .cyberpunk:before {
  background-color: #000;
  color: var(--yellow-color);
}

炫酷的表單元素

2077 的表單也很有特色，輸入框元素 input 和 textarea 同樣可以使用 clip-path: polygon 實現不規則形狀，單選框和多選框則可以利用偽元素:before、:after 進行裝飾。

<input class="cyberpunk" type="text" placeholder="input 輸入框" />
<textarea class="cyberpunk" placeholder="textarea 文字框"></textarea>
<label class="cyberpunk"><input class="cyberpunk" name="test" type="radio" />單選框1</label>
<label class="cyberpunk"><input class="cyberpunk" name="test" type="radio" />單選框2</label><br />
<label class="cyberpunk"><input class="cyberpunk" type="checkbox" />多選框</label><br />

完整實現如下：

input[type="text"].cyberpunk, textarea.cyberpunk {
  width: calc(100% - 30px);
  border: 30px solid #000;
  border-left: 5px solid #000;
  border-right: 5px solid #000;
  border-bottom: 15px solid #000;
  clip-path: polygon(0px 25px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 25px, 100% calc(100% - 10px), calc(100% - 15px) calc(100% - 10px), calc(80% - 10px) calc(100% - 10px), calc(80% - 15px) calc(100% - 0px), 10px calc(100% - 0px), 0% calc(100% - 10px));
  padding: 12px;
}
input[type="radio"].cyberpunk {
  border-radius: 15%;
  z-index: 100;
  height: 14px;
  width: 20px;
  appearance: none;
  outline: none;
  background-color: #000;
  cursor: pointer;
  position: relative;
  margin: 0px;
  display: inline-block;
}
input[type="radio"].cyberpunk:after {
  content: "";
  display: block;
  width: 8px;
  height: 6px;
  background-color: var(--yellow-color);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: background 0.3s, left 0.3s;
}
input[type="radio"].cyberpunk:checked:after {
  background-color: var(--border-color);
  left: 10px;
}
input[type="checkbox"].cyberpunk {
  border-radius: 15%;
  z-index: 100;
  height: 20px;
  width: 20px;
  appearance: none;
  outline: none;
  background-color: #000;
  cursor: pointer;
  position: relative;
  margin: 0px;
  margin-bottom: -3px;
  display: inline-block;
}
input[type="checkbox"].cyberpunk:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border: 2px solid var(--yellow-color);
  border-top: 2px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 4px;
}
input[type="checkbox"].cyberpunk:after {
  content: "";
  display: block;
  width: 2px;
  height: 7px;
  background-color: var(--yellow-color);
  position: absolute;
  top: 3px;
  left: 9px;
}
input[type="checkbox"].cyberpunk:checked:before {
  border-color: var(--border-color);
  border-top-color: transparent;
}
input[type="checkbox"].cyberpunk:checked:after {
  background-color: var(--border-color);
}

標題和文字

賽博朋克風格網頁在文字展示中，常常用到如下圖所示的 輸入游標閃爍 樣式及螢幕 故障風格 的樣式，我們可以統一為 h1 - h5 標題，hr 等元素增加下劃線裝飾和故障動畫效果，下面來看看如何實現這樣的文字效果的。

<h1 class="cyberpunk">H1 title</h1>
<h1 class="cyberpunk glitched">H1 title glitched</h1>

h1.cyberpunk {
  position: relative;
}
h1.cyberpunk:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0px;
  left: 2px;
  width: 100%;
  height: 10px;
  background-color: #000;
  clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
}
h1.cyberpunk.glitched {
  animation-name: glitched;
  animation-duration: calc(.9s * 1.4);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes glitched {
  0% { left: -4px; transform: skew(-20deg); }
  11% { left: 2px; transform: skew(0deg); }
  50% { transform: skew(0deg); }
  51% { transform: skew(10deg); }
  60% { transform: skew(0deg); }
  100% { transform: skew(0deg); }
}
h1.cyberpunk.glitched:before {
  animation-name: beforeglitched;
  animation-duration: calc(.9s * 2);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes beforeglitched {
  0% {
    left: -4px;
    transform: skew(-20deg);
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  11% {
    left: 2px;
    transform: skew(0deg);
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  50% {
    transform: skew(0deg);
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  51% {
    transform: skew(0deg);
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 40% 5px, calc(40% - 30px) 0px, calc(40% + 30px) 0px, calc(45% - 15px) 5px, 100% 5px, 100% 6px, calc(45% - 14px) 6px, calc(40% + 29px) 1px, calc(40% - 29px) 1px, calc(40% + 1px) 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  60% {
    transform: skew(0deg);
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  100% {
    transform: skew(0deg);
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
}

金屬質感

在 賽博朋克2077 的網頁裡，為了突顯科技感，很多頁面元素都具有金屬質感，如模態彈窗的背景、文字展示塊的邊框等。這部分內容看看如何實現簡單的金屬材質背景。

4個 button 元素，將被分別新增 金、銀、銅、鈦 的金屬背景色效果。

<button class="gold">gold 金</button>
<button class="silver">silver 銀</button>
<button class="bronze">bronze 銅</button>
<button class="titanium">titanium 鈦</button>

實現金屬光澤效果，主要以下幾個個css 屬性：

box-shadow：增加陰影，突出立體質感。
background: radial-gradient：徑向漸變，新增底部陰影。
background: linear-gradient：線性漸變，主色調背景。
background: conic-gradient：圓錐漸變，最終反光金屬效果。

依次新增以上三種漸變如下圖所示：

示例完整實現程式碼：

button {
  padding: 2px;
  width: 250px;
  height: 250px;
  border-radius: 12px;
  border: groove 1px transparent;
}
.gold {
  box-shadow: inset 0 0 0 1px #eedc00, inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.5);
  background: conic-gradient(#edc800, #e3b600, #f3cf00, #ffe800, #ffe900, #ffeb00, #ffe000, #ebc500, #e0b100, #f1cc00, #fcdc00, #d4c005fb, #fad900, #eec200, #e7b900, #f7d300, #ffe800, #ffe300, #f5d100, #e6b900, #e3b600, #f4d000, #ffe400, #ebc600, #e3b600, #f6d500, #ffe900, #ffe90a, #edc800) content-box, linear-gradient(#f6d600, #f6d600) padding-box, radial-gradient(rgba(120, 120, 120, 0.9), rgba(120, 120, 120, 0) 70%) 50% bottom/80% 0.46875em no-repeat border-box;
}
.silver {
  box-shadow: inset 0 0 0 1px #c9c9c9, inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.5);
  background: conic-gradient(#d7d7d7, #c3c3c3, #cccccc, #c6c6c6, #d3d3d3, #d8d8d8, #d5d5d5, #d8d8d8, #d3d3d3, #c5c5c5, #c0c0c0, #bfbfbf, #d0d0d0, #d9d9d9, #d1d1d1, #c5c5c5, #c8c8c8, #d7d7d7, #d5d5d5, #cdcdcd, #c4c4c4, #d9d9d9, #cecece, #c5c5c5, #c5c5c5, #cdcdcd, #d8d8d8, #d9d9d9, #d7d7d7) content-box, linear-gradient(#d4d4d4, #d4d4d4) padding-box, radial-gradient(rgba(120, 120, 120, 0.9), rgba(120, 120, 120, 0) 70%) 50% bottom/80% 0.46875em no-repeat border-box;
}
.bronze {
  box-shadow: inset 0 0 0 1px #bc7e6b, inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.5);
  background: conic-gradient(#d95641, #b14439, #b2453a, #d25645, #d56847, #d05441, #b85137, #b2453a, #c34f40, #df4647, #a94338, #c94943, #c85442, #a4413c, #d9543a, #d1564e, #ab4338, #bb4a3c, #dc5843, #b94839, #aa4237, #c24e42, #ce523f, #ab4338, #dd5944, #ca4d33, #ab4338, #cb503e, #d95641) content-box, linear-gradient(#ad3b36, #ad3b36) padding-box, radial-gradient(rgba(120, 120, 120, 0.9), rgba(120, 120, 120, 0) 70%) 50% bottom/80% 0.46875em no-repeat border-box;
}
.titanium {
  box-shadow: inset 0 0 0 1px #c7aca0, inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.5);
  background: conic-gradient(#e6c9bf, #d2b5aa, #cbaea3, #d4b5ab, #e5c3bd, #d9c0b4, #d9bcb1, #c5a399, #e3c6bc, #e7cac0, #dec0b5, #d3b6ab, #cfada1, #d4b6ac, #e2c6c0, #e2c6c0, #d2b1a6, #d2b1a6, #d1b4a9, #e1c4ba, #e5c9be, #dec1b6, #d3b6ab, #ceb0a6, #cfada3, #d2b5aa, #dabdb2, #e5c9be, #e6c9bf) content-box, linear-gradient(#e5c9be, #e5c9be) padding-box, radial-gradient(rgba(120, 120, 120, 0.9), rgba(120, 120, 120, 0) 70%) 50% bottom/80% 0.46875em no-repeat border-box;
}

結合 3 種漸變，還能創造出更多複雜好看的金屬材質效果，完整程式碼可預覽文章尾部的對應連結 ?。

其他

除了上述幾個方面，還有哪些賽博朋克風格的元素是值得我們學習的呢？通過以下幾點，也可以提升網頁的科技藝術感和使用者體驗，你有沒有更好的想法呢？?

使用扁平、畫素化字型；
科技感滿滿的頁面載入動畫、滾動動畫、滾動條；
中/日/英混雜的文案突出未來世界的文化融合；
根據滑鼠移動增加透視效果，可以看我另一篇文章 《如何在CSS中對映的滑鼠位置，並實現通過滑鼠移動控制頁面元素效果》。
...

閱讀更多

故障圖片效果示例完整版 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

用css實現視差效果
2019-05-14
CSS
視覺還原小技巧！CSS 實現角標效果
2022-06-27
視覺CSS
css揭祕實戰技巧 - 視覺效果[三]
2019-05-06
CSS視覺
用CSS Houdini實現一個Material風格的按鈕
2021-12-29
CSS
css實現視差滾動效果
2017-12-14
CSS
探索<賽博朋克>風格遊戲美術
2021-10-11
遊戲
《英雄聯盟》VFX視覺風格指南
2020-09-21
視覺
用純 CSS 實現鏤空效果
2019-02-22
CSS
用JavaScript和CSS3在HTML裡實現音樂視覺化效果
2015-01-13
JavaScriptCSSS3HTML視覺化
僅用 CSS 實現多彩、智慧的陰影
2021-05-12
CSS
達人分享 | 遊戲視覺風格解析——從卡通到寫實
2021-01-21
遊戲視覺
巧用模糊實現視覺的 3D 效果
2021-09-03
視覺3D
Cydia介面風格視覺更新更扁平化更現代化
2015-02-13
視覺
用CSS實現Tab頁切換效果
2019-03-04
CSS
用純css實現打星星效果（三）
2018-07-13
CSS
One Page Scroll – 實現蘋果風格的單頁滾動效果
2013-10-25
蘋果
CSS3 動畫實現12種風格的通知提示
2014-12-10
CSSS3動畫
小例項: 用vue實現手風琴效果
2019-05-14
Vue
css 實現打分效果
2019-02-28
CSS
用js（hover ）+css實現下拉框效果（有效果圖）
2019-01-16
JSCSS
視覺化學習：使用WebGL實現網格背景
2024-03-05
視覺化Web
三步帶你實現資料視覺化
2022-04-24
視覺化
CSS Houdini：用瀏覽器引擎實現高階CSS效果
2022-07-11
CSS瀏覽器
Core Animation實戰四（視覺效果）
2017-10-31
視覺
用vue實現部落格列表的級聯效果
2018-04-18
Vue
用程式設計工具實現資料視覺化的幾個選擇
2012-11-28
程式設計視覺化
CSS實現鏤空效果
2018-12-22
CSS
CSS 如何實現羽化效果？
2022-12-15
CSS
純 CSS 實現波浪效果！
2017-07-19
CSS
使用 CSS 實現透明效果
2024-07-16
CSS
分享用CSS實現無圖片圓角效果
2007-07-20
CSS
創造簡約視覺風格的 3 個原則
2019-04-30
視覺
小視訊原始碼，CSS 實現半透明邊框效果
2022-06-14
原始碼CSS
css3實現緩慢下拉手風琴導航選單效果
2017-03-09
CSSS3
用 kotlin 來實現 dsl 風格的程式設計
2017-06-08
Kotlin程式設計
純 CSS 實現斜紋效果
2019-02-26
CSS
CSS實現footer“吸底”效果
2018-10-09
CSS
純CSS實現液晶字型效果
2020-11-28
CSS