专栏首页前端技术江湖仅用 CSS 实现赛博朋克 2077 风格视觉效果

仅用 CSS 实现赛博朋克 2077 风格视觉效果

作者 dragonir 原文链接:https://juejin.cn/post/6972759988632551460

文章开始之前先简单了解下什么是 赛博朋克,以及什么是 赛博朋克2077

  • 赛博朋克(Cyberpunk)是“控制论、神经机械学”与“朋克”的结合词,背景大都建立于“低端生活与高等科技的结合”,拥有先进的科学技术,再以一定程度崩坏的社会结构做对比;拥有五花八门的视觉冲击效果,如街头的霓虹灯、街排标志性广告以及高楼建筑等,通常搭配色彩是以黑、紫、绿、蓝、红为主。其中菲利普·狄克所著作的《仿生人会梦到电子羊吗?》最受注目,小说亦被改编成电影《银翼杀手》。总的来讲,赛博朋克的风格主线,就是反应出科技高度发展的人类文明,与脆弱渺小的人类个体之间的强烈反差,同时外界与内在,钢铁与肉体,过去与未来,现实与虚幻等矛盾在其中交织。

《赛博朋克2077》 是一款动作角色类游戏,于 2020年12月10日 登陆各大游戏平台。故事发生在夜之城,权力更迭和身体改造是这里不变的主题。玩家将扮演一名野心勃勃的雇佣兵:V,追寻一种独一无二的植入体——获得永生的关键。它以自由的探索性,较高的操控度以及惊艳的视觉特效收获了一大批玩家。我非常喜欢 2077 官网的设计风格,因此本篇文章主要以 2077 官网为例,通过几个例子,依次实现赛博朋克风格元素效果。

实现

高对比度

首先我们来看一下 2077 中文官网首页,页面主要以醒目的 明黄色 为主色调,并小面积使用它的对比色 淡蓝色玫红色 的色块作为点缀,文本和线条边框使用 纯黑色。这一步实现非常简单,我们在实现赛博朋克风格的页面时,可以使用上面提到的 黑、紫、绿、蓝、红 为主色调,再以它们的对比色作为按钮、文本提示框,可以实现强烈的视觉冲击。

故障风格按钮

故障效果是一种显示设备崩坏效果,在 2077 官网中应用很多,我们先来实现 buttonhover 时产生故障效果。

<button>立即加入</button>

故障效果主要通过 clip-path: inset 和动画实现。利用 button 的伪元素 ::after,给它定义多个分片 --slice 变量,并通过动画切换切片的位置,来实现晃动效果。其中clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。inset() 方法用于定义一个矩形,可以传入 5 个参数,分别对应 toprightbottomleft的裁剪位置及 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 字体:s3-us-west-2.amazonaws.com/s.cdpn.io/7…[1]

不规则文本框

赛博朋克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中映射的鼠标位置,并实现通过鼠标移动控制页面元素效果》
  • ...

阅读更多

  • 故障图片效果示例完整版 codepen.io/dragonir/fu…[2]
  • 复杂的金属效果 codepen.io/dragonir/fu…[3]
  • 标题文本 codepen.io/dragonir/fu…[4]
  • 赛博朋克404页面 codepen.io/ltrademark/…[5]

参考资料

[1]

https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf: https://link.juejin.cn/?target=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fs.cdpn.io%2F707108%2Fneon.ttf

[2]

https://codepen.io/dragonir/full/oNZPLzo: https://link.juejin.cn/?target=https%3A%2F%2Fcodepen.io%2Fdragonir%2Ffull%2FoNZPLzo

[3]

https://codepen.io/dragonir/full/jOBvrZP: https://link.juejin.cn/?target=https%3A%2F%2Fcodepen.io%2Fdragonir%2Ffull%2FjOBvrZP

[4]

https://codepen.io/dragonir/full/vYxzwGG: https://link.juejin.cn/?target=https%3A%2F%2Fcodepen.io%2Fdragonir%2Ffull%2FvYxzwGG

[5]

https://codepen.io/ltrademark/pen/xpgprZ: https://link.juejin.cn/?target=https%3A%2F%2Fcodepen.io%2Fltrademark%2Fpen%2FxpgprZ

The End

本文分享自微信公众号 - 前端技术江湖(bigerfe)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-07-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 赛博朋克2077主题优秀设计作品赏析(优点+吐槽)-No.21

    静电说:赛博朋克2077从发售到现在已经一个月多的时间了,静电也在第一时间入手了本作,说到赛博朋克风,静电有印象的还属《攻壳机动队》这部电影,光怪陆离的未来世界...

    用户5009027
  • 达人分享 | 游戏视觉风格解析——从卡通到写实

    作者 | macma/shiqihe 编辑 | moruomili |导语  随着游戏行业的发展,游戏的种类越发多元,游戏的视觉呈现形式也愈加丰富。我们特邀光...

    腾讯大讲堂
  • 《赛博朋克2077》是捏脸游戏?上科大学生社团开发了一款赛博“滤镜”

    来自上海科技大学的学生社团GeekPie打造了一款全新的“滤镜”,CyberMe。只需上传一张照片,一秒将你带入夜之城!

    AI科技大本营
  • 后科技时代—赛博朋克2077

    跳票多次终于还是来了,发售之日便收回成本这几乎是前无古人后无来者,这样一款现象级大作,我肯定也是忍不住滴,而且我的台式机配置还不错,一直没找到真正发挥作用的机会...

    ZONGLYN
  • 赛博朋克这么火,如果与Python结合,能有多酷?

    游戏的背景设定在了2077年,一个科技高度发达但却混乱无序的“赛博朋克”都市当中。

    数据森麟
  • E3 2018任天堂专场丨饕餮盛宴《任天堂明星大乱斗》重磅来袭!

    每年 E3 游戏展前发布会,任天堂总是最晚登场的厂商。前两天召开的几家厂商的E3展前发布会,可以说内容十分劲爆,各种大作层出不穷。

    VRPinea
  • BUF大事件丨黑客开始针对M1芯片,全球3万余台Mac电脑已感染恶意软件

    本周BUF大事件还是为大家带来了新鲜有趣的安全新闻,全球3万余台Mac电脑已感染恶意软件,黑客开始针对M1芯片;CD Projekt遭网络攻击,赛博朋克2077...

    FB客服
  • E3 |大厂纷纷“圆饼”,谷歌Stadia平台能否将游戏行业带入“云”时代?

    本届E3展会尽管缺少了业界大佬索尼,但依旧干货满满。微软全新世代主机公布、《赛博朋克2077》和《最终幻想7重制版》相继公布发售日期,就连时代的眼泪—《博德之门...

    VRPinea
  • 机器学习让3D设计速度提升7倍!Adobe最新Substance 3D小白也能入门

    近日,Adobe推出了利用AI技术进行沉浸式创作的Substance 3D的工具。

    新智元
  • 它听键盘声就知道你敲的是什么——GitHub 热点速览 Vol.51

    本以为本周的 GitHub 和十二月一样平平无奇就那么度过了,结果 BackgroundMattingV2 重新刷新了本人的认知,还能这种骚操作在线实时抠视频去...

    HelloGitHub
  • 探索|比VR/AR更进一步的脑机技术,会给我们带来什么?

    作为一项前沿的技术,VR/AR为人类带来了无限可能,包括虚实结合的方式、超越现实的体验,以及帮助人类更好地理解世界(通过将数据可视化)等。不过,VR/AR技术仍...

    VRPinea
  • 福利 | QQfamily旗舰店设计揭秘

    ? 7月底,首家QQfamily线下旗舰店在深圳欢乐海岸开业。集合了潮玩销售、主机游戏体验、游戏电影KTV聚会包房等消费场景的QQfamily主题店一开业即火...

    腾讯ISUX
  • 资讯速览|20 1221

    该公司还宣布,App Clip Codes (编码一个 URL 并可以合并一个 NFC 标签的视觉图像)现在也可以在 App Store Connect 或新的...

    LiveVideoStack
  • 英伟达RTX 3060评测:虽然只卖2499,但刀法有点过猛

    今年 1 月,英伟达在 CES 2021 上正式发布了 RTX 3060 显卡。该显卡拥有 30 系迄今为止第二大的显存容量 12GB,仅次于 RTX 3090...

    机器之心
  • 4800H成为过去时,看游戏本CPU+GPU组合新选择

    2021年转眼已过去三分之二,在这段时间里,《生化危机8》、《赛博朋克2077》等热门的游戏大作不断涌现。随着游戏画面越发精致,特效越发逼真,对图形性能的要求也...

    云上计算
  • 4800H成过去时,游戏本CPU+GPU组合已有新标答

    2021年转眼已过去三分之二,在这段时间里,《生化危机8》、《赛博朋克2077》等热门的游戏大作不断涌现。随着游戏画面越发精致,特效越发逼真,对图形性能的要求也...

    云上计算
  • 网红 AI 高仿坎爷发布说唱情歌,歌迷:堪比真人原声

    内容概要:AI 帮坎爷出新歌了,不过是由媒体机构 Herr Fuchs 制作,Uberduck AI 提供声音合成技术的一首高仿作品:《The Breakup》

    HyperAI超神经
  • 赛博朋克风VR游戏,以娱乐形式思考科技和人性

    谈及VR等科技,小编认为“赛博朋克(Cyberpunk)”不得不提。此前,可能很多人只听过“蒸汽朋克(Steampunk)”,那么简单来说,蒸汽朋克描述的是历史...

    VRPinea
  • 火绒安全周报:起亚汽车遭勒索攻击 《赛博朋克2077》源码被黑客出售

    日前,起亚汽车美国分公司遭受DoopelPaymer恶意团伙发动的勒索软件攻击,被开出2000万美元天价赎金。如果拒绝支付,不仅锁定数据无法还原,失窃的起亚内部...

    用户6477171

扫码关注云+社区

领取腾讯云代金券