仅用 CSS 实现赛博朋克 2077 风格视觉效果
top: 0;left: 0;opacity: 0;
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 两个元素是两个文本载体，将被应用不同的霓虹效果样式和动画。
文字的霓虹效果主要通过 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 进行装饰。
完整实现如下：
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 title
H1 title glitched
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 的网页里，为了突显科技感，很多页面元素都具有金属质感，如模态弹窗的背景、文本展示块的边框等。这部分内容看看如何实现简单的金属材质背景。
基础面试题
主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等
px, 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 的网页里，为了突显科技感，很多页面元素都具有金属质感，如模态弹窗的背景、文本展示块的边框等。这部分内容看看如何实现简单的金属材质背景。
基础面试题
主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
19
0- 0
已为社区贡献2条内容
所有评论(0)