数ステップでサイバーパンク2077風の視覚効果を実現するCSS

背景

記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。

サイバーパンクは「サイバネティクス、ニューロメカニクス」と「パンク」を組み合わせたもので、背景は主に「ローエンドの生活とハイエンドのテクノロジーの組み合わせ」に基づいています。科学技術が発達しており、ある程度崩壊した社会構造と対比されています。街頭のネオンライト、象徴的な街頭広告、高層ビルなど、さまざまな視覚的なインパクト効果があります。色は通常、黒、紫、緑、青、赤です。その中にはフィリップ・K・ディック著の『アンドロイドは電気羊の夢を見るか?』がある。》が最も人気があり、この小説は映画「ブレードランナー」にも採用されました。一般的に言えば、サイバーパンクスタイルのメインテーマは、高度に発達した科学技術の人類文明と脆弱で小さな人間個人との間の鮮明な対比を反映しており、同時に、外部と内部、鋼鉄と肉体、過去と未来、現実と幻想などの矛盾が絡み合っています。

《賽博朋克2077》は2020年12月10日に主要ゲームプラットフォームで発売予定のアクションロールプレイングゲームです。物語はナイトシティを舞台としており、パワーチェンジや身体改造が常にテーマとなっている。プレイヤーは、不死の鍵となるユニークなインプラントを求める野心的な傭兵Vの役割を担います。自由な探索、高い操作性、そして驚異的な視覚効果で、多くのプレイヤーを魅了しています。私は2077公式サイトのデザインスタイルがとても好きなので、この記事では主に2077公式サイトを例に挙げ、いくつかの例を通してサイバーパンクスタイルの要素効果を一つずつ実現していきます。

成し遂げる

高コントラスト

まず、 2077中国公式サイトのホームページを見てみましょう。ページは主に目を引く明黃色で、対照的な淡藍色と玫紅色ブロックの小さな領域が装飾として使用されています。テキストと線の境界線は純黑色です。このステップは実装が非常に簡単です。サイバーパンクスタイルのページを実装する場合、上記の黑、紫、綠、藍、紅メインカラーとして使用し、それらの対照的な色をボタンやテキストプロンプトボックスとして使用して、強い視覚的インパクトを実現できます。

グリッチスタイルのボタン

グリッチエフェクトは、 2077公式サイトで広く使用されているディスプレイデバイスのクラッシュエフェクトです。まずはbuttonにhoverときのグリッチエフェクトを実装してみましょう。

<button>今すぐ参加</button>

グリッチ効果は主にclip-path: insetとアニメーションによって実現されます。 button疑似要素::after使用して複数のスライス--slice変数）を定義し、アニメーションを通じてスライスの位置を切り替えて揺れ効果を実現します。 clip-path属性はクリッピングを使用して要素の表示可能領域を作成します。領域内の部分が表示され、領域外の部分は非表示になります。 inset()メソッドは、四角形を定義するために使用されます。 top 、 right 、 bottom 、 leftクリッピング位置と、 roundおよびradius (オプション、丸い角の場合) に対応する5パラメータを渡すことができます。基本的な構文は次のとおりです。

inset( <length-percentage>{1,4} [ round <border-radius> ]? )
クリップパス: inset(2em 3em 2em 1em round 2em);

完全実装:

ボタン、ボタン::after {
  幅: 300ピクセル;
  高さ: 86px;
  フォントサイズ: 40px;
  背景: 線形グラデーション(45度、透明度5%、#FF013C 5%);
  境界線: 0;
  色: #fff;
  文字間隔: 3px;
  行の高さ: 88px;
  ボックスの影: 6px 0px 0px #00E6F6;
  アウトライン: 透明;
  位置: 相対的;
}
ボタン::after {
  --slice-0: インセット(50% 50% 50% 50%);
  --slice-1: インセット(80% -6px 0 0);
  --slice-2: インセット(50% -6px 30% 0);
  --slice-3: インセット(10% -6px 85% 0);
  --slice-4: インセット(40% -6px 43% 0);
  --slice-5: インセット(80% -6px 5% 0);
  内容: '今すぐ参加';
  表示: ブロック;
  位置: 絶対;
  上: 0;
  左: 0;
  右: 0;
  下部: 0;
  背景: 線形グラデーション(45度、透明3%、#00E6F6 3%、#00E6F6 5%、#FF013C 5%);
  テキストシャドウ: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  クリップパス: var(--slice-0);
}
ボタン:ホバー::後{
  アニメーション: 1 秒の不具合;
  アニメーションタイミング関数: steps(2, end);
}
@keyframes グリッチ {
  0% { クリップパス: var(--slice-1); 変換: translate(-20px, -10px); }
  10% { クリップパス: var(--slice-3); 変換: translate(10px, 10px); }
  20% { クリップパス: var(--slice-1); 変換: translate(-10px, 10px); }
  30% { クリップパス: var(--slice-3); 変換: translate(0px, 5px); }
  40% { クリップパス: var(--slice-2); 変換: translate(-5px, 0px); }
  50% { クリップパス: var(--slice-3); 変換: translate(5px, 0px); }
  60% { クリップパス: var(--slice-4); 変換: translate(5px, 10px); }
  70% { クリップパス: var(--slice-2); 変換: translate(-10px, 10px); }
  80% { クリップパス: var(--slice-5); 変換: translate(20px, -10px); }
  90% { クリップパス: var(--slice-1); 変換: translate(-10px, 0px); }
  100% { クリップパス: var(--slice-1); 変換: translate(0); }
}

グリッチスタイルの写真

グリッチ効果は、テキスト、画像、ビデオなどのメディア表示にも適用でき、完全なテクノロジーの雰囲気を作り出すことができます。このセクションでは、グリッチスタイルの画像表示効果を実現する方法を見てみましょう。

.glitchは画像を表示するためのメインコンテナーです。その子要素glitch__item 、上記の例の::after疑似要素に似た障害バーを表すために使用されます。

<div class="グリッチ">
  <div class="glitch__item"></div>
  <!-- ... -->
  <div class="glitch__item"></div>
</div>

グリッチ風画像とグリッチ風ボタンの実装アイデアは基本的に似ていますが、今回はclip-path: polygon使用して実装します。polygon polygonポリゴンをクリッピングする方法であり、その値の各ペアはクリッピング要素の座標を表します。 background-blend-modeプロパティは、背景レイヤーのブレンドモードを定義します。記事の長さが限られているため、次のコードでは、障害バーのアニメーションのみを示しています。完全な例については、記事の最後にある対応するリンクを参照してください🔗

：根 {
  --gap-horizontal: 10px;
  --gap-vertical: 5px;
  --time-anim: 4秒;
  --delay-anim: 2秒;
  --blend-mode-1: なし;
  --blend-color-1: 透明;
}
.グリッチ{
  位置: 相対的;
}
.グリッチ .グリッチ__アイテム {
  背景: url("banner.png") 繰り返しなし 50% 50%/カバー;
  高さ: 100%;
  幅: 100%;
  上: 0;
  左: 0;
  位置: 絶対;
}
.glitch .glitch__item:n番目の子(1) {
  背景色: var(--blend-color-1);
  背景ブレンドモード: var(--blend-mode-1);
  アニメーション期間: var(--time-anim);
  アニメーション遅延: var(--delay-anim);
  アニメーションタイミング関数: linear;
  アニメーションの反復回数: 無限;
  アニメーション名: glitch-anim-1;
}
@keyframes グリッチアニメーション1 {
  0% {
    不透明度: 1;
    変換: translate3d(var(--gap-horizontal), 0, 0);
    クリップパス: ポリゴン(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% { クリップパス: ポリゴン(0 15%, 100% 15%, 100% 15%, 0 15%); }
  4% { クリップパス: ポリゴン(0 10%, 100% 10%, 100% 20%, 0 20%); }
  6% { クリップパス: ポリゴン(0 1%, 100% 1%, 100% 2%, 0 2%); }
  8% { クリップパス: ポリゴン(0 33%, 100% 33%, 100% 33%, 0 33%); }
  10% { クリップパス: ポリゴン(0 44%, 100% 44%, 100% 44%, 0 44%); }
  12% { クリップパス: ポリゴン(0 50%, 100% 50%, 100% 20%, 0 20%); }
  14% { クリップパス: ポリゴン(0 70%, 100% 70%, 100% 70%, 0 70%); }
  16% { クリップパス: ポリゴン(0 80%, 100% 80%, 100% 80%, 0 80%); }
  18% { クリップパス: ポリゴン(0 50%, 100% 50%, 100% 55%, 0 55%);
  20% { クリップパス: ポリゴン(0 70%, 100% 70%, 100% 80%, 0 80%); }
  21.9%
    不透明度: 1;
    変換: translate3d(var(--gap-horizontal), 0, 0);
  }
  22%、100% {
    不透明度: 0;
    変換: translate3d(0, 0, 0);
    クリップパス: ポリゴン(0 0, 0 0, 0 0, 0 0);
  }
}

ネオンエレメント

映画「ブレードランナー」や「CASE」、ゲーム「ウォッチドッグス」や「サイバーパンク2077」などのサイバーパンクシーンでは、廃墟🏠でも賑やかな歌舞伎町⛩️でも、 neon要素がたくさんあります。ページタイトル、ボタン、フォームの境界線など、ネオン効果を使用できる多くのネオン要素を使用してページを装飾することもできます。以下は、ネオンテキストの実装の簡単な例です。

.neon要素と.flux要素は、異なるネオン効果スタイルとアニメーションが適用される 2 つのテキストキャリアです。

<div class="neon">サイバー</div>
<div class="flux">パンク</div>

テキストのネオン効果は主にtext-shadow属性によって実現され、点滅効果もテキストに近い色のtext-shadowアニメーションを追加することで実現されます.neon要素にはease-in-outモーションカーブが適用され、 .flux要素には、 linearモーションカーブが適用されます。この 2 つの違いがわかりますか? 😂

.ネオン{
  テキストシャドウ: 0 0 3vw #F4BD0A;
  アニメーション: ネオン 2s イーズインアウト 無限;
}
.フラックス{
  テキストシャドウ: 0 0 3vw #179E05;
  アニメーション: フラックス 2s 線形無限;
}
@keyframes ネオン {
  0%、100% {
    テキストシャドウ: 0 0 1vw #FA1C16、0 0 3vw #FA1C16、0 0 10vw #FA1C16、0 0 10vw #FA1C16、0 0 .4vw #FED128、.5vw .5vw .1vw #806914;
    色: #FFFC00;
  }
  50% {
    テキストシャドウ: 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;
    色: #806914;
  }
}
@keyframes フラックス {
  0%、100% {
    テキストシャドウ: 0 0 1vw #10ff4c、0 0 3vw #1041FF、0 0 10vw #1041FF、0 0 10vw #1041FF、0 0 .4vw #8BFDFE、.5vw .5vw .1vw #147280;
    色: #03C03C;
  }
  50% {
    テキストシャドウ: 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;
    色: #179E05;
  }
}

テキストをよりネオンっぽく見せるために、上記の例ではneonフォントを使用しています: https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf

不規則なテキストボックス

サイバーパンク2077では、多くのテキスト表示ボックスがこの不規則な形状になっていることがわかります。かっこいいと思いませんか？このパートでは、 2077スタイルのテキストボックスの実装方法を紹介します。

上記の3テキストボックスは、それぞれ3 pタグで構成されています。.inverse クラス.inverse反転した背景を表し、 .dotted点線の背景を実現します。

<p class="cyberpunk">サイバーパンクの典型的なキャラクターは、疎外され、孤立した孤独な人です。彼らは、急激な技術革新、世界中に広がるコンピュータ化された情報、そして侵略的な人間改造によって日常生活が影響を受けるディストピア的な未来において、社会の周縁に住んでいます。 </p>
<p class="cyberpunk inverse">サイバーパンクの典型的なキャラクターは、疎外され、孤立した孤独な人です。彼らは、急激な技術革新、世界中に広がるコンピュータ化された情報、そして侵略的な人間改造によって日常生活が影響を受けるディストピア的な未来において、社会の周縁に住んでいます。 </p>
<p class="cyberpunk inverse dotted">サイバーパンクの典型的なキャラクターは、疎外され、孤立した孤独な人です。彼らは、急激な技術革新、世界中に広がるコンピュータ化された情報、そして侵略的な人間改造によって日常生活が影響を受けるディストピア的な未来において、社会の周縁に住んでいます。 </p>

テキストボックスの不規則な形状は、主にclip-path: polygonによって実現されます。以下の座標をクリッピングすることで、 2077スタイルのポリゴンを実現できます。

クリップパス: ポリゴン(
  0ピクセル 25ピクセル、
  26ピクセル 0ピクセル、
  計算(60% - 25px) 0px,
  60% 25ピクセル、 
  100% 25ピクセル、 
  100% 計算(100% - 10px)、
  計算(100% - 15px) 計算(100% - 10px)、
  計算(80% - 10px) 計算(100% - 10px)、
  計算(80% - 15px) 100%、
  80px 計算(100% - 0px)、
  65px 計算(100% - 15px)、
  0% 計算(100% - 15px)
);

完全なコード:

：根 {
  --黄色: #f9f002;
  --境界線の色: #8ae66e;
}
.サイバーパンク{
  パディング: 5px;
  位置: 相対的;
  フォントサイズ: 1.2rem;
  色: var(--yellow-color);
  境界線: 30px 実線 var(--yellow-color);
  右境界線: 5px 実線 var(--yellow-color);
  左境界線: 5px 実線 var(--yellow-color);
  下部境界線: 24px 実線 var(--yellow-color);
  背景色: #000;
  クリップパス: 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));
}
.サイバーパンク.インバース{
  境界線: なし;
  パディング: 40px 15px 30px;
  色: #000;
  背景色: var(--yellow-color);
  右境界線: 2px 実線 var(--border-color);
}
.dotted、.dotted:before、.dotted:after {
  背景: var(--yellow-color);
  背景画像: 放射状グラデーション(#00000021 1px, 透明度 0);
  背景サイズ: 5px 5px;
  背景位置: -13px -3px;
}
/*テキスト ボックスの右側に小さな数字のスタイル*/
.サイバーパンク:before {
  内容：「P-14」
  表示: ブロック;
  位置: 絶対;
  下: -12px;
  右: 25px;
  パディング: 2px 2px 0px 2px;
  フォントサイズ: 0.6rem;
  行の高さ: 0.6rem;
  色: #000;
  背景色: var(--yellow-color);
  左境界線: 2px 実線 var(--border-color);
}
.サイバーパンク.inverse:before {
  内容：「T-71」
  右: 90px;
  下: 9px;
}
.サイバーパンク.逆:前、.サイバーパンク:前 {
  背景色: #000;
  色: var(--yellow-color);
}

クールなフォーム要素

2077のフォームも非常に特徴的です。入力ボックス要素inputとtextareaもclip-path: polygonを使用して不規則な形状を実現できます。また、ラジオボタンと複数選択ボックスは疑似要素:beforeと:afterで装飾できます。

<input class="サイバーパンク" type="テキスト" placeholder="入力ボックス" />
<textarea class="サイバーパンク" placeholder="テキストエリア テキストボックス"></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"].サイバーパンク、テキストエリア.サイバーパンク {
  幅: calc(100% - 30px);
  境界線: 30px 実線 #000;
  左境界線: 5px 実線 #000;
  右境界線: 5px 実線 #000;
  下境界線: 15px 実線 #000;
  クリップパス: 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));
  パディング: 12px;
}
入力[type="radio"].サイバーパンク{
  境界線の半径: 15%;
  zインデックス: 100;
  高さ: 14px;
  幅: 20px;
  外観: なし;
  アウトライン: なし;
  背景色: #000;
  カーソル: ポインタ;
  位置: 相対的;
  マージン: 0px;
  表示: インラインブロック;
}
入力[type="radio"].サイバーパンク:after {
  コンテンツ： "";
  表示: ブロック;
  幅: 8px;
  高さ: 6px;
  背景色: var(--yellow-color);
  位置: 絶対;
  上: 2px;
  左: 2px;
  遷移: 背景 0.3 秒、左 0.3 秒。
}
input[type="radio"].cyberpunk:checked:after {
  背景色: var(--border-color);
  左: 10px;
}
入力[type="checkbox"].サイバーパンク{
  境界線の半径: 15%;
  zインデックス: 100;
  高さ: 20px;
  幅: 20px;
  外観: なし;
  アウトライン: なし;
  背景色: #000;
  カーソル: ポインタ;
  位置: 相対的;
  マージン: 0px;
  下マージン: -3px;
  表示: インラインブロック;
}
input[type="checkbox"].cyberpunk:before {
  コンテンツ： "";
  表示: ブロック;
  幅: 8px;
  高さ: 8px;
  境界線: 2px 実線 var(--yellow-color);
  border-top: 2px 透明の実線;
  境界線の半径: 50%;
  位置: 絶対;
  上: 5px;
  左: 4px;
}
input[type="checkbox"].サイバーパンク:after {
  コンテンツ： "";
  表示: ブロック;
  幅: 2px;
  高さ: 7px;
  背景色: var(--yellow-color);
  位置: 絶対;
  上: 3px;
  左: 9px;
}
input[type="checkbox"].cyberpunk:checked:before {
  境界線の色: var(--border-color);
  境界線上部の色: 透明;
}
input[type="checkbox"].cyberpunk:checked:after {
  背景色: var(--border-color);
}

タイトルとテキスト

サイバーパンクスタイルのウェブページのテキスト表示では、下図のような輸入光標閃爍スタイルや画面の故障風格がよく使用されます。 h1 - h5タイトル、 hrなどの要素に下線の装飾や失敗アニメーション効果を均一に追加できます。このようなテキスト効果を実現する方法を見てみましょう。

<h1 class="cyberpunk">H1 タイトル</h1>
<h1 class="cyberpunk glitched">H1 タイトルに不具合あり</h1>

h1.サイバーパンク{
  位置: 相対的;
}
h1.サイバーパンク:before {
  コンテンツ： "";
  表示: ブロック;
  位置: 絶対;
  下: 0px;
  左: 2px;
  幅: 100%;
  高さ: 10px;
  背景色: #000;
  クリップパス: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
}
h1.サイバーパンク.グリッチ {
  アニメーション名: グリッチ;
  アニメーション期間: calc(.9s * 1.4);
  アニメーションの反復回数: 無限;
  アニメーションタイミング関数: linear;
}
@keyframes グリッチ {
  0% { 左: -4px; 変換: skew(-20deg); }
  11% { 左: 2px; 変換: skew(0deg); }
  50% { 変換: skew(0deg); }
  51% { 変換: skew(10deg); }
  60% { 変換: skew(0deg); }
  100% { 変換: skew(0deg); }
}
h1.サイバーパンク.glitched:前{
  アニメーション名: beforeglitched;
  アニメーション期間: calc(.9s * 2);
  アニメーションの反復回数: 無限;
  アニメーションタイミング関数: linear;
}
グリッチ前の@keyframes {
  0% {
    左: -4px;
    変換: skew(-20deg);
    クリップパス: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  11% {
    左: 2px;
    変換: skew(0deg);
    クリップパス: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  50% {
    変換: skew(0deg);
    クリップパス: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  51% {
    変換: skew(0deg);
    クリップパス: 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% {
    変換: skew(0deg);
    クリップパス: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
  100% {
    変換: skew(0deg);
    クリップパス: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  }
}

金属の質感

賽博朋克2077ウェブページでは、テクノロジー感を強調するために、モーダルポップアップウィンドウの背景やテキスト表示ブロックの境界など、多くのページ要素に金属的な質感が使われています。このセクションでは、シンプルな金属素材の背景を実現する方法を説明します。

4 つのbutton要素には、それぞれ金、銀、銅、鈦のメタリックな背景色効果が追加されます。

<button class="gold">ゴールド</button>
<button class="silver">シルバー</button>
<button class="bronze">ブロンズ</button>
<button class="titanium">チタン</button>

メタリックな光沢効果を実現するために、主に次のcssプロパティが使用されます。

box-shadow : 影を追加して立体的なテクスチャを強調します。
background: radial-gradient : 下部に影を追加する放射状グラデーション。
background: linear-gradient : 線形グラデーション、原色の背景。
background: conic-gradient : 円錐状のグラデーション。反射するメタリック効果を生み出します。

上記の 3 つのグラデーションを以下のように順番に追加します。

完全な実装コードの例:

ボタン {
  パディング: 2px;
  幅: 250ピクセル;
  高さ: 250px;
  境界線の半径: 12px;
  境界線: 溝 1px 透明;
}
。金 {
  box-shadow: インセット 0 0 0 1px #eedc00、インセット 0 1px 2px rgba(255, 255, 255, 0.5)、インセット 0 -1px 2px rgba(0, 0, 0, 0.5);
  背景：Conic-Gradient（＃edc800、＃e3b600、＃f3cf00、＃ffe900、＃ffeb00、＃ffeb00、＃e0b100、＃f1CC00、 ＃f5d100、＃e6b900、＃e3b600、＃ffe400、＃ebc600、＃e3b600、＃ffe900、＃ffe90a、＃edc800） RGBA（120、120、120、0）70％）50％ボトム/80％0.46875EMノーレピートボーダーボックス。
}
.シルバー{
  box-shadow: インセット 0 0 0 1px #c9c9c9、インセット 0 1px 2px rgba(255, 255, 255, 0.5)、インセット 0 -1px 2px rgba(0, 0, 0, 0.5);
  背景：conic-勾配（＃d7d7d7、＃c3c3c3、＃cccccc、＃c6c6c6、＃d3d3d3、＃d8d8d8、＃d8d8d8、 、＃c5c5c5、＃c8c8c8、＃d7d7d7、＃d5d5d5、＃cdcdcd、＃c4c4c4、＃d9d9d9、＃c5c5c5、＃c5c5c5、＃cdcdcd、＃d8d8、＃d9d9-d7d7 d4d4、＃d4d4d4）パディングボックス、ラジアルグレディエント（RGBA（120、120、120、0.9）、RGBA（120、120、120、0）70％）50％ボトム/80％0.46875EM NO-Repeat Border-Box;
}
.ブロンズ{
  ボックスシャドウ: インセット 0 0 0 1px #bc7e6b、インセット 0 1px 2px rgba(255, 255, 255, 0.5)、インセット 0 -1px 2px rgba(0, 0, 0, 0.5);
  背景：conic-勾配（＃D95641、＃B14439、＃B25645、＃D56847、＃D05441、＃B85137、＃B2453A、＃C34F40、＃DF4647、 43A、＃D1564E、＃AB4338、＃BB4A3C、＃DC5843、＃AA4237、＃C24E42、＃CE523F、＃AB4338、＃DD5944、＃CA4D33 36、＃AD3B36）パディングボックス、ラジアル勾配（RGBA（120、120、120、0.9）、RGBA（120、120、120、0）70％）50％ボトム/80％0.46875EMノーリピートボーダーボックス。
}
.チタン{
  box-shadow: インセット 0 0 0 1px #c7aca0、インセット 0 1px 2px rgba(255, 255, 255, 0.5)、インセット 0 -1px 2px rgba(0, 0, 0, 0.5);
  背景：conic-gradient（＃e6c9bf、＃d2b5aa、＃cbaea3、＃d4b5ab、＃e5c3bd、＃d9c0b4、＃c5a399、＃e3c6bc、＃e7cac0、＃dec0b5 0、＃d2b1a6、＃d2b1a6、＃d1b4a9、＃e5c9be、＃dec1b6、＃d3b6ab、＃cfada3、＃d2b5aa、＃dabdb2、＃e5c9be、＃e6c9bf） 、ラジアル勾配（RGBA（120、120、120、0.9）、RGBA（120、120、120、0）70％）50％ボトム/80％0.46875EM NO-Repeat Border-Box;
}

3グラデーションを組み合わせることで、より複雑で美しい金属素材効果を作成できます。完全なコードは、記事の最後にある対応するリンクでプレビューできます🔗 。

他の

上記の側面に加えて、他に学ぶ価値のあるサイバーパンクスタイルの要素は何ですか?以下の点も、Web ページの技術的、芸術的センスとユーザーエクスペリエンスを向上させることができます。もっと良いアイデアはありますか? 😊

フラットなピクセル化されたフォントを使用します。
ハイテクなページ読み込みアニメーション、スクロールアニメーション、スクロールバー。
中国語、日本語、英語が混在するコピーライティングは、未来の世界の文化統合を強調しています。
マウスの動きに基づいて遠近感効果を高めるには、私の別の記事《如何在CSS中映射的鼠標位置，并實現通過鼠標移動控制頁面元素效果》をお読みください。
...

これで、CSS を数ステップで使用してサイバーパンク 2077 スタイルの視覚効果を実現する方法について説明したこの記事は終了です。CSS サイバーパンク 2077 の関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: フロントエンドページのポップアップマスクはページのスクロールを禁止します

>>: HTML で vue-router を使用するサンプルコード