CSS to achieve Cyberpunk 2077 style visual effects in a few steps

CSS to achieve Cyberpunk 2077 style visual effects in a few steps

background

Before starting the article, let’s briefly understand what賽博朋克is and what賽博朋克2077 is.

Cyberpunk is a combination of "cybernetics, neuromechanics" and "punk". The background is mostly based on the "combination of low-end life and high-end technology". It has advanced science and technology, and is contrasted with a social structure that has collapsed to a certain extent. It has a variety of visual impact effects, such as neon lights on the streets, iconic street advertisements and high-rise buildings, etc. The colors are usually black, purple, green, blue and red. Among them is "Do Androids Dream of Electric Sheep?" written by Philip K. Dick. 》 is the most popular one, and the novel was also adapted into the movie "Blade Runner". Generally speaking, the main theme of cyberpunk style reflects the sharp contrast between the highly developed technological human civilization and the fragile and tiny human individuals. At the same time, contradictions such as the outside and the inside, steel and flesh, past and future, reality and illusion are intertwined in it.

《賽博朋克2077》 is an action role-playing game that will be released on major gaming platforms on 2020年12月10日. The story takes place in Night City, where power changes and body modification are constant themes. Players will take on the role of V , an ambitious mercenary on a quest for a one-of-a-kind implant - the key to immortality. It has attracted a large number of players with its free exploration, high controllability and stunning visual effects. I like the design style of 2077 official website very much, so this article mainly takes 2077 official website as an example, and through several examples, realizes the cyberpunk style element effects one by one.

accomplish

High contrast

First, let’s take a look at the homepage of 2077 Chinese official website. The page is mainly in eye-catching明黃色, and uses small areas of contrasting淡藍色and玫紅色blocks as embellishments. The text and line borders are純黑色. This step is very simple to implement. When implementing a cyberpunk-style page, we can use黑、紫、綠、藍、紅mentioned above as the main colors, and then use their contrasting colors as buttons and text prompt boxes to achieve a strong visual impact.

Glitch style button

The glitch effect is a display device crash effect, which is widely used in the 2077 official website. Let's first implement the glitch effect when button is hover . 

<button>Join Now</button>

The glitch effect is mainly achieved through clip-path: inset and animation. Use button pseudo-element ::after to define multiple slices --slice variables for it, and switch the positions of the slices through animation to achieve the shaking effect. The clip-path attribute uses clipping to create the displayable area of ​​the element. The part inside the area is displayed, and the part outside the area is hidden. inset() method is used to define a rectangle. 5 parameters can be passed in, corresponding to top , right , bottom , left clipping positions and round and radius (optional, for rounded corners). Its basic syntax is as follows:

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

Full implementation:

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: 'Join now';
  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 style pictures

The glitch effect can also be applied to media displays such as text, pictures, and videos to create a full technological atmosphere. In this section, let’s take a look at how to achieve a glitch-style image display effect.

.glitch is the main container for displaying the image. Its child element glitch__item is used to represent the fault bar, which is similar to the ::after pseudo-element in the above example.

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

The implementation ideas of glitch-style images and glitch-style buttons are basically similar, but this time clip-path: polygon is used to implement it. polygon is a method for clipping polygons, and each pair of its values ​​represents the coordinates of the clipping element. background-blend-mode property defines the blending mode of the background layer. Due to the limited length of the article, the following code only shows the animation of a fault bar. For a complete example, please refer to the corresponding link at the end of the article 🔗

: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);
  }
}

Neon elements

In cyberpunk scenes, such as the movies "Blade Runner" and "Case", and the games "Watch Dogs" and "Cyberpunk 2077", there are a lot of neon elements, whether in abandoned buildings 🏠 or bustling Kabukicho ⛩️ . We can also use a lot of neon elements to decorate the page, such as page titles, buttons, form borders, etc., all of which can use neon effects. The following is a brief example of neon text implementation:

.neon and .flux elements are two text carriers that will be applied with different neon effect styles and animations.

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

The neon effect of text is mainly achieved through text-shadow attribute, and the flashing effect is also achieved by adding a text-shadow animation with a color close to the text. The .neon element is applied with ease-in-out motion curve, and the .flux element is applied with linear motion curve. Can you see the difference between the two? 😂

.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;
  }
}

To make the text look more neon, the above example uses the neon font: https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf

Irregular text box

In Cyberpunk 2077, you can see that many text display boxes are of this irregular shape. Isn’t it cool? This part will introduce how to implement a 2077 style text box.

3 text boxes above are composed of 3 p tags respectively. The .inverse class represents an inverted background, .dotted will achieve a dotted background.

<p class="cyberpunk">The classic cyberpunk character is the marginalized and alienated loner. They live on the margins of society, in a dystopian future where daily life is impacted by radical technological change, pervasive computerized information sweeping the globe, and invasive human modification. </p>
<p class="cyberpunk inverse">The classic cyberpunk character is the marginalized and alienated loner. They live on the margins of society, in a dystopian future where daily life is impacted by radical technological change, pervasive computerized information sweeping the globe, and invasive human modification. </p>
<p class="cyberpunk inverse dotted">The classic cyberpunk character is the marginalized and alienated loner. They live on the margins of society, in a dystopian future where daily life is impacted by radical technological change, pervasive computerized information sweeping the globe, and invasive human modification. </p>

The irregular shape of the text box is mainly realized by clip-path: polygon . By clipping the following coordinates, the 2077 -style polygon can be realized.

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)
);

Full code:

: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;
}
/*Small number style on the right side of the text box*/
.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);
}

Cool form elements

The form of 2077 is also very distinctive. The input box elements input and textarea can also use clip-path: polygon to achieve irregular shapes, and the radio button and multiple-choice box can be decorated with pseudo-elements :before and :after . 

<input class="cyberpunk" type="text" placeholder="input input box" />
<textarea class="cyberpunk" placeholder="textarea text box"></textarea>
<label class="cyberpunk"><input class="cyberpunk" name="test" type="radio" />Radio 1</label>
<label class="cyberpunk"><input class="cyberpunk" name="test" type="radio" />Radio Box 2</label><br />
<label class="cyberpunk"><input class="cyberpunk" type="checkbox" />Multiple choice box</label><br />

The complete implementation is as follows:

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);
}

Title and text

In the text display of cyberpunk style web pages,輸入光標閃爍style and screen故障風格as shown in the figure below are often used. We can uniformly add underline decoration and failure animation effects to h1 - h5 titles, hr and other elements. Let's see how to achieve such text effects. 

<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);
  }
}

Metal Texture

In the賽博朋克2077 webpage, in order to highlight the sense of technology, many page elements have a metallic texture, such as the background of modal pop-up windows, the borders of text display blocks, etc. In this section, we will see how to achieve a simple metal material background.

The four button elements will be added with metallic background color effects of金、銀、銅、鈦respectively.

<button class="gold">gold</button>
<button class="silver">silver </button>
<button class="bronze">bronze</button>
<button class="titanium">titanium </button>

To achieve the metallic gloss effect, the following css properties are mainly used:

  • box-shadow : Add shadow to highlight the three-dimensional texture.
  • background: radial-gradient : Radial gradient, adding a bottom shadow.
  • background: linear-gradient : Linear gradient, primary color background.
  • background: conic-gradient : Conical gradient, resulting in a reflective metallic effect.

Add the above three gradients in sequence as shown below:

Example complete implementation code:

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;
}

By combining 3 gradients, you can create more complex and beautiful metal material effects. The complete code can be previewed at the corresponding link at the end of the article 🔗 .

other

In addition to the above aspects, what other cyberpunk style elements are worth learning? The following points can also improve the technological artistic sense and user experience of the web page. Do you have any better ideas? 😊

  • Use flat, pixelated fonts;
  • High-tech page loading animation, scrolling animation, and scroll bar;
  • The mixed copywriting of Chinese/Japanese/English highlights the cultural integration of the future world;
  • To increase the perspective effect based on mouse movement, you can read my other article 《如何在CSS中映射的鼠標位置，并實現通過鼠標移動控制頁面元素效果》 .
  • ...

This is the end of this article about how to use CSS in a few steps to achieve Cyberpunk 2077 style visual effects. For more relevant CSS Cyberpunk 2077 content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  Detailed explanation of HTML basic tags and structures

>>:  The front-end page pop-up mask prohibits page scrolling

Recommend

CSS achieves the effect of changing the color of the entire line when the mouse is placed on it

summary: The following is a method for changing t...

Sending emails in html is easy with Mailto

Recently, I added a click-to-send email function t...

Summary of Problems in Installing MySQL 5.7.19 under Linux

The first time I installed MySQL on my virtual ma...

Looking at Tomcat's thread model from the connector component - BIO mode (recommended)

In higher versions of Tomcat, the default mode is...

Vue implements the magnifying glass effect of tab switching

This article example shares the specific code of ...

Vue realizes dynamic progress bar effect

This article example shares the specific code of ...

Nginx merges request connections and speeds up website access examples

Preface As one of the best web servers in the wor...

Detailed use of Echarts in vue2 vue3

Table of contents 1. Installation 2. Use Echarts ...

TypeScript decorator definition

Table of contents 1. Concept 1.1 Definition 1.2 D...

Ubuntu 16.04 64-bit compatible with 32-bit programs in three steps

Step 1: Confirm the architecture of your system d...

Detailed explanation of the initialization mechanism in bash

Bash Initialization Files Interactive login shell...

Using Nginx to implement grayscale release

Grayscale release refers to a release method that...

Examples of new selectors in CSS3

Structural (position) pseudo-class selector (CSS3...

ReactJs Basics Tutorial - Essential Edition

Table of contents 1. Introduction to ReactJS 2. U...

Comparing Document Locations

<br />A great blog post by PPK two years ago...