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

故障风格按钮

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

立即加入

故障效果主要通过 clip-path: inset 和动画实现。利用 button 的伪元素 ::after，给它定义多个分片 --slice 变量，并通过动画切换切片的位置，来实现晃动效果。其中clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。inset() 方法用于定义一个矩形，可以传入 5 个参数，分别对应 top，right，bottom，left的裁剪位置及 round 和 radius（可选，圆角），它的基本语法如下：

inset( {1,4} [ round  ]? )

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 伪元素作用类似。

故障风格图片和故障风格按钮实现思路基本类似，不过这次用到了 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 两个元素是两个文本载体，将被应用不同的霓虹效果样式和动画。

CYBER

PUNK

文字的霓虹效果主要通过 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 个文本框分别由3 个 p 标签构成，.inverse 类表示反色背景，.dotted 将实现点状背景。

经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘，一个弥漫反乌托邦氛围的未来：日常生活受到急剧改变的科技影响，普及的计算机化信息笼罩全球，以及侵入性的人体改造。

经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘，一个弥漫反乌托邦氛围的未来：日常生活受到急剧改变的科技影响，普及的计算机化信息笼罩全球，以及侵入性的人体改造。

经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘，一个弥漫反乌托邦氛围的未来：日常生活受到急剧改变的科技影响，普及的计算机化信息笼罩全球，以及侵入性的人体改造。

文本框不规则的形状主要由 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 的表单也很有特色，输入框元素 input 和 textarea 同样可以使用 clip-path: polygon 实现不规则形状，单选框和多选框则可以利用伪元素:before、:after 进行装饰。

单选框1

单选框2

多选框

完整实现如下：

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 等元素增加下划线装饰和故障动画效果，下面来看看如何实现这样的文字效果的。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

}

标题和文本

赛博朋克风格网页在文本展示中，常常用到如下图所示的 输入光标闪烁 样式及屏幕 故障风格 的样式，我们可以统一为 h1 - h5 标题，hr 等元素增加下划线装饰和故障动画效果，下面来看看如何实现这样的文字效果的。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-PK0gk32R-1715811773647)]

[外链图片转存中…(img-vAStK37k-1715811773647)]

[外链图片转存中…(img-UrVOVJVR-1715811773647)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！