• <button id="eiyoe"><acronym id="eiyoe"></acronym></button>
    <em id="eiyoe"></em>

  • <rp id="eiyoe"><acronym id="eiyoe"><input id="eiyoe"></input></acronym></rp>
      查看: 310|回復: 0
      上一主題 下一主題

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

      80292

      主題

      0

      好友

      積分

      離線 發信

      跳轉到指定樓層
      樓主
      發表于 2021-07-25 19:58 | 只看該作者 | 倒序瀏覽

      背景

      文章開始之前先簡單了解下什么是 賽博朋克,以及什么是 賽博朋克2077。

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

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

      實現

      高對比度

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

      故障風格按鈕

      故障效果是一種顯示設備崩壞效果,在 2077 官網中應用很多,我們先來實現 buttonhover 時產生故障效果。

      <button>立即加入</button>

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

      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 個文本框分別由3p 標簽構成,.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 的表單也很有特色,輸入框元素 inputtextarea 同樣可以使用 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中映射的鼠標位置,并實現通過鼠標移動控制頁面元素效果》。
      • ...

      到此這篇關于CSS幾步實現賽博朋克2077風格視覺效果的文章就介紹到這了,更多相關CSS賽博朋克2077內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      來源:http://www.jb51.net/css/779059.html