CSS steps to achieve the visual effect of cyberpunk 2077 style

Time:2021-7-19

background

Before the article begins, let’s have a brief understanding of what isCyberpunkAnd what is itCyberpunk 2077

Cyberpunk is a combination of “cybernetics, neuromechanics” and “punk”. Its background is mostly based on “the combination of low-end life and high technology”. Cyberpunk has advanced science and technology, and then contrasts with the collapse of social structure to a certain extent; It has a variety of visual impact effects, such as neon lights on the street, landmark advertisements on the street and high-rise buildings, etc. the color matching is usually black, purple, green, blue and red. Among them, Philip Dick’s “bionic man can dream of electronic sheep?” The novel has also been adapted into the movie blade killer. Generally speaking, the main line of cyberpunk’s style reflects the strong contrast between the highly developed human civilization and the fragile human individual. At the same time, the contradictions between the outside and the inside, steel and body, past and future, reality and illusion are intertwined.

Cyberpunk 2077Is an action role games, in theDecember 10, 2020Log in to major game platforms. The story takes place in the night city, where the change of power and physical transformation are the constant themes. The player will play an ambitious mercenary:VIn search of a unique implant – the key to immortality. It has gained a large number of players with free exploration, high degree of control and amazing visual effects. I like it very much2077The design style of the official website, so this article mainly focuses on2077Take the official website as an example, through several examples, we can achieve the effect of cyberpunk style elements in turn.

realization

High contrast

First, let’s take a look2077Chinese official website home page, the page is mainly eye-catchingBright yellowMain tone, and small area use its contrast colorLight bluerose redColor blocks are used as embellishments, text and line bordersPure black。 This step is very simple. When we implement the cyberpunk style page, we can use the method mentioned aboveBlack, purple, green, blue, redThe main tone, and then their contrast color as buttons, text prompt box, can achieve a strong visual impact.

Fault style button

Failure effect is a kind of display device breakdown effect, which is shown in the2077There are many applications in the official website. Let’s implement them firstbuttonstayhoverThe fault effect is produced when the fault occurs.

< button > join now

The failure effect is mainly throughclip-path: insetAnd animation. utilizebuttonPseudo elements of::afterAnd define multiple partitions for it--sliceVariable, and through the animation to switch the position of the slice, to achieve the shaking effect. amongclip-pathAttribute creates a displayable area of an element using clipping. The part inside the area is displayed, and the part outside the area is hidden.inset()Method is used to define a rectangle that can be passed in5Parameters corresponding totoprightbottomleftThe cutting position and theroundandradius(optional, fillet). Its basic syntax is as follows:


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

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

Fault style picture

Fault effect can also be applied to text, picture, video and other media display, creating a full atmosphere of science and technology. This part of the content to see how to achieve fault style picture display effect.

.glitchIs to show the main body of the container for the image, and its child elementsglitch__itemIt is used to indicate the fault bar, which is similar to that in the above example::afterPseudo elements have similar effects.


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

Fault style picture and fault style button implementation ideas are basically similar, but this time usedclip-path: polygonrealization,polygonThe method used to cut a polygon. Each pair of values represents the coordinates of the cutting element.background-blend-modeAttribute defines the blending mode of the background layer. Due to the limited space of the article, the following code only shows the animation of a fault bar. For a complete example, see 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 element

In cyberpunk scenes, such as the movie blade killer, the secret service, the game watchdog and cyberpunk 2077, no matter in abandoned buildings🏠Is it a prosperous song and dance town⛩️, there are a lot of neonneonElements. We can also use a large number of neon elements to decorate the page, such as page title, button, form border and so on. The following is a brief example of neon text implementation:

.neonand.fluxThe two elements are two text carriers, which will be applied with different neon effect styles and animations.


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

The neon effect of characters is mainly throughtext-shadowAttribute, the flicker effect is also achieved by adding a color similar to the texttext-shadowAnimation, in which.neonThe element is appliedease-in-outMotion curve,.fluxThe element is appliedlinearMotion 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 usesneontypeface: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 irregular graphics, isn’t it cool? This part will introduce how to realize it2077Style text box.

above3Text boxes are created by3individualpLabel composition,.inverseClass represents an inverse background,.dottedDot background will be implemented.

The classic cyberpunk characters are marginal and alienated loners. They live on the edge of social groups, in a future filled with anti Utopian atmosphere: their daily life is affected by rapidly changing technology, the popularity of computerized information all over the world, and invasive human transformation</ p>
The classic cyberpunk characters are marginal and alienated loners. They live on the edge of social groups, in a future filled with anti Utopian atmosphere: their daily life is affected by rapidly changing technology, the popularity of computerized information all over the world, and invasive human transformation</ p>
The classic cyberpunk characters are marginal and alienated loners. They live on the edge of social groups, in a future filled with anti Utopian atmosphere: their daily life is affected by rapidly changing technology, the popularity of computerized information all over the world, and invasive human transformation</ p>

The irregular shape of the text box is mainly composed ofclip-path: polygonImplementation, through the following coordinate cutting, you can achieve2077The style of the polygon has changed.


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

2077The form is also very distinctive, input box elementsinputandtextareaIt can also be usedclip-path: polygonTo achieve irregular shape, single box and multi box can use pseudo elements:before:afterDecorate.

< 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 box 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, the following figure is often usedThe input cursor flashesStyle and screenFault styleWe can unify them intoh1h5title,hrAnd other elements to add underline decoration and fault animation effect, let’s see how to achieve such a text effect.


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

Metallic texture

stayCyberpunk 2077In order to highlight the sense of science and technology, many page elements have metal texture, such as the background of modal pop-up window, the border of text display block and so on. This section looks at how to implement a simple metal background.

4buttonElements will be added separatelyGold, silver, copper, titaniumMetal background color effect.

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

Achieve metallic luster effect, mainly the followingcssProperties:

  • box-shadow: add shadow, highlight three-dimensional texture.
  • background: radial-gradient: radial gradient, add bottom shadow.
  • background: linear-gradient: linear gradient, main tone background.
  • background: conic-gradient: taper gradient, final reflective metal effect.

Add the above three gradients in turn, as shown in the figure 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;
}

combination3A gradient, but also to create more complex and good-looking metal material effect, complete code can preview the corresponding link at the end of the article🔗

other

In addition to the above aspects, what other elements of cyberpunk style are worth learning? Through the following points, we can also enhance the sense of science and technology art and user experience of the web page. Do you have a better idea?😊

  • Use flat, pixel font;
  • Science and technology full of page loading animation, scroll animation, scroll bar;
  • The Chinese / Japanese / English mixed copy highlights the cultural integration of the future world;
  • According to the mouse movement to increase perspective effect, you can see my another articleHow to map the mouse position in CSS and control the effect of page elements by moving the mouse

So far, this article about CSS steps to achieve the visual effect of cyberpunk 2077 style is introduced here. For more relevant CSS content of cyberpunk 2077, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!