赛博朋克2077风格选择,赛博朋克2077造型设计

背景

　　在文章开始之前，我们先简单了解一下什么是赛博朋克，什么是赛博朋克2077。

　　赛博朋克是“控制论、神经力学”和“朋克”的结合。其背景多以“低端生活与高科技的结合”为基础，以先进的科学技术，再与已经崩溃到一定程度的社会结构相比较。它具有多种视觉冲击效果，如街道霓虹灯、街道地标广告和高层建筑等。通常以黑、紫、绿、蓝、红为主色调。其中菲利普迪克写的《仿生人会梦到电子羊吗？》最引人注目，小说也被改编成电影《银翼杀手》。总的来说，赛博朋克的风格主线体现了高度发达的人类文明与脆弱的人类个体之间的鲜明对比。同时，外在与内在、钢铁与身体、过去与未来、现实与虚幻的矛盾交织在一起。

　　055-79000是一款动作角色游戏，于2020年12月10日登陆各大游戏平台。故事发生在夜之城，力量的变化和物质的转化是这里不变的主题。玩家将扮演一个野心勃勃的佣兵：V，寻求一个独特的植入物3354永生的钥匙。它以其自由探索、高操控性和惊艳的视觉效果收获了一大批玩家。我很喜欢2077官网的设计风格，所以本文主要以2077官网为例，通过几个例子来实现赛博朋克风格元素的效果。

实现

高对比度

　　首先我们来看看2077中文官网首页。页面的主色是醒目的亮黄色，一小块区域用其对比色浅蓝和玫红装饰。文本和线条边框由纯黑色构成。这一步的实现很简单。当我们实现赛博朋克风格的页面时，可以用上述的黑、紫、绿、蓝、红作为主色调，再用它们的对比色作为按钮和文字提示框，达到强烈的视觉冲击。

故障风格按钮

　　失败效果是一种显示设备崩溃效果，在2077官网中被广泛使用。我们先来认识一下按钮在悬停时的失效效果。

　　按钮加入/按钮立即失效的效果主要是通过clip-path: inset和animation实现的。利用按钮的伪元素：after，为其定义多个slices - slice变量，通过动画切换切片的位置，实现晃动效果。clip-path属性通过剪辑创建元素的可显示区域。局部显示在区域内，隐藏在区域外。使用inset()方法定义一个矩形，可以传入五个参数，分别对应上、右、下、左、圆、半径(可选，圆角)的裁剪位置。其基本语法如下：

　　inset(长度百分比{1，4} [圆形边框半径]？)clip-path:inset(2em 3em 2em 1em round 2em)；完成：

　　button，button:after { width:300 px；高度：86px字体大小：40px背景：线性梯度(45度，透明5%，# ff 013 c 5%)；边框：0;颜色：# fff字母间距：3px行高：88pxbox-shadow:6px 0px 0px # 00e 6 f 6；轮廓：透明；位置：相对；}按钮：在{ - slice-0:嵌入(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)；内容： 立即加入；显示：块；位置：绝对；top:0；左：0;右：0;底部：0;背景：线性渐变(45度，透明3%，#00E6F6 3%，#00E6F6 5%，# ff 013 c 5%)；text-shadow: -3px -3px 0px #F8F005，3px 3px 0px # 00 E6 F6 clip-path:var(-slice-0)；}按钮：悬停：在{动画：1s小故障；动画-计时-功能：步骤(2,结束);} @关键帧毛刺{ 0% {限幅路径：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)；}}

故障风格图片

　　 故障效果同样可以应用在文本、图片、视频等媒体展示上，营造满满的科技氛围。这部分内容来看看如何实现故障风格的图片展示效果。小故障是为图片展示容器主体，它的子元素故障_ _项用来表示故障条，与上例中*之后伪元素作用类似。

　　div class= glitch div class= glitch _ _ item /div！-.-div class= glitch _ _ item /div/div故障风格图片和故障风格按钮实现思路基本类似，不过这次用到了裁剪路径：多边形实现，多边形用于裁切多边形的方法，它的每对值表示裁切元素的坐标背景混合模式属性定义了背景层的混合模式。由于文章篇幅有限，以下代码只展示了一个故障条的动画，完整例子可查看文章末尾对应链接：

　　：根{ -间隙-水平：10px-间隙-垂直：5px-时代-动漫：4s；-delay-anim:2s；-混合模式-1:无；-混合色-1:透明；}.毛刺{位置：相对；}.故障glitch _ _ item { background:URL( banner。png’)无重复50% 50%/封面；身高：100%;宽度：100%;top:0；左：0;位置：绝对；}.故障glitch _ _ item:n-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)；动画-计时-功能：线性；动画-迭代-计数：无限；动画名：glitch-anim-1；} @关键帧glitch-anim-1 { 0% {不透明度：1；transform:平移3d(var(-gap-horizontal)，0，0)；剪辑路径：多边形(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% {剪辑路径：多边形(0 33%,100% 33%,100% 33%,0 33%);} 10% { clip-path: polygon(0 44%，100% 44%，100% 44%，0 44%)；} 12% {剪辑路径：多边形(0 50%,100% 50%,100% 20%,0 20%);} 14% {剪辑路径：多边形(0 70%,100% 70%,100% 70%,0 70%);} 16% {剪辑路径：多边形(0 80%,100% 80%,100% 80%,0 80%);} 18% {剪辑路径：多边形(0 50%,100% 50%,100% 55%,0 55%);} 20% {剪辑路径：多边形(0 70%,100% 70%,100% 80%,0 80%);} 21.9% {不透明度：1;transform:平移3d(var(-gap-horizontal)，0，0)；} 22%,100% {不透明度：0;transform: translate3d(0，0，0)；clip-path: polygon(0 0，0 0，0 0，0 0)；}}

霓虹元素

　　 在赛博朋克场景中，如电影《赛博朋克2077》 《银翼杀手》 、游戏《机壳特工队》 《看门狗》 中无论是在废弃的建筑物、还是繁华的歌舞町 ,都存在大量的霓虹氖元素。我们同样可以使用大量霓虹元素来装饰页面，比如页面标题、按钮、表单边框等都可以使用霓虹效果，下面是霓虹文字实现的简要示例：氖和。流量两个元素是两个文本载体，将被应用不同的霓虹效果样式和动画。

　　网络/divdiv文字的霓虹效果主要通过文本阴影属性实现，闪烁效果也是通过添加与文字颜色相近的文本阴影动画来实现，其中。氖元素被应用了缓进缓出运动曲线，流量元素被应用了线性的运动曲线，可以看出两者之间的差别吗。neon { text-shadow:0 0 3vw # f4bd 0a；动画：氖2s缓进缓出无限；}.flux { text-shadow:0 0 3vw # 179 e05；动画：通量2s线性无限；} @关键帧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颜色：# fffc 00 } 50% { text-shadow:0 0 . 5 VW # 800 e0b，0 0 1.5vw #800E0B，0 0 5vw #800E0B，0 0 5vw #800E0B，0 0 .2vw #800E0B，5vw .5vw .1vw # 40340A颜色：# 806914;} } @关键帧通量{ 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颜色：# 03c 03c } 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颜色：# 179E05}}为了使文字看起来更有霓虹效果，以上示例使用了氖字体：https://S3美国西部2号。亚马逊AWS。com/s . cdpn。io/707108/霓虹。TrueType字型文件

　　不规则文本框

　　赛博朋克2077中可以看到很多文本展示框都是这种不规则图形的，是不是很酷呢，这部分内容将介绍如何实现2077 风格的文本框。

　　上面3个文本框分别由3个p标签构成，相反的类表示反色背景，有点的将实现点状背景。

　　赛博朋克经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘，一个弥漫反乌托邦氛围的未来：日常生活受到急剧改变的科技影响，普及的计算机化信息笼罩全球，以及侵入性的人体改造/pp class=赛博朋克逆经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘，一个弥漫反乌托邦氛围的未来：日常生活受到急剧改变的科技影响，普及的计算机化信息笼罩全球，以及侵入性的人体改造/pp class=赛博朋克逆点经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘，一个弥漫反乌托邦氛围的未来：日常生活受到急剧改变的科技影响，普及的计算机化信息笼罩全球，以及侵入性的人体改造100元/人文本框不规则的形状主要由裁剪路径：多边形实现，通过以下几个坐标的裁切，就可以实现2077 风格的多边形了。

　　裁剪路径：多边形(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)，60%完整代码：

　　:root {-yellow-color:# f9f 002；-边框-颜色：# 8ae66e}。赛博朋克{ padding:5px；位置：相对；字体大小：1.2雷姆；颜色：var( -黄色);边框：30px纯色var( -黄色);右边框：5px纯色变量(-黄色);左边边框：5px纯色变量(-黄色);底部边框：24px纯色var( -黄色);背景色：# 000;裁剪路径：多边形(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)，60%}。网络朋克。反向{ border:无；填充：40px 15px 30px颜色：# 000;背景色：var( -黄色);border-right:2px solid var(-border-color)；}.点状，虚线：之前，虚线：在{背景：var( -黄色)之后；背景-图像：径向渐变(#00000021 1px，透明0);背景-尺寸：5px 5px背景-位置：-13px-3px；}/* 文本框右侧小编号样式*/.赛博朋克：之前{内容：‘P-14’；显示：块；位置：绝对；底部：-12px；右：25px填充：2px 2px 0px 2px字体大小：0.6雷姆；行高：0.6雷姆；颜色：# 000;背景色：var( -黄色);border-left:2px solid var(-border-color)；} .网络朋克。逆：在{ content: T-71 之前；右：90px底部：9px}.cyberpunk.inverse:之前，赛博朋克：在{背景色：# 000；颜色：var( -黄色);}

炫酷的表单元素

　　 2077 的表单也很有特色，输入框元素投入和文本区域同样可以使用裁剪路径：多边形实现不规则形状，单选框和多选框则可以利用伪元素：之前、之后进行装饰。

　　input class= cyber punk type= text placeholder= input输入框/textarea class= cyber punk placeholder= textarea文本框/textarea label class= cyber punk input class= cyber punk name= test type= radio /单选框1/label label class= cyber punk input class= cyber punk name= test type= radio /单选框2/label br/label class= cyber punk input class= cyber punk type= checkbox /多选框/labelbr /完整实现如下：

　　输入[type=text].赛博朋克，textarea。赛博朋克{宽度：calc(100%-30px)；边框：30px纯色# 000;边框-左侧：5px纯色# 000;右边框：5px固体# 000边框-底部：15px纯色# 000;裁剪路径：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% - 10px)，calc(100% - 0px)，100%-00%填充：12px}输入[type=radio].赛博朋克{边框半径：15%；z指数：100;高度：14px宽度：20px外观：无；大纲：无；背景色：# 000;光标：指针；位置：相对；边距：0px显示：内嵌-块；}输入[type=radio].赛博朋克：之后{内容： ;显示：块；宽度：8px高度：6px背景色：var( -黄色);位置：绝对；top:2px；左：2px转场：背景0.3s，左0.3s}输入[type=radio].赛博朋克：已检查：在{ background-color:var(-border-color)之后；左：10px}输入[type=checkbox].赛博朋克{边框半径：15%；z指数：100;高度：20px宽度：20px外观：无；大纲：无；背景色：# 000;光标：指针；位置：相对；边距：0 px margin-bottom:-3px；显示：内嵌-块；}输入[type=checkbox].赛博朋克：之前{内容： ;显示：块；宽度：8px高度：8px边框：2px纯色var( -黄色);上边框：2px纯色透明；边界半径：50%;位置：绝对；top:5px；左：4px}输入[type=checkbox].赛博朋克：之后{内容： ;显示：块；宽度：2px高度：7px背景色：var( -黄色);位置：绝对；top:3px；左：9px}输入[type=checkbox].赛博朋克：勾选：之前{ border-color:var(-border-color)；边框-顶部-颜色：透明；}输入[type=checkbox].赛博朋克：已检查：在{ background-color:var(-border-color)之后；}

标题和文本

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

　　h1 class=赛博朋克 h1 title/h1 h1 class=赛博朋克故障 h1 title故障/h1 h1。赛博朋克{职务：相对；} h1。赛博朋克：之前{内容： ；显示：块；位置：绝对；底部：0px左：2px宽度：100%;高度：10px背景色：# 000;剪辑路径：多边形(0px 0px，85px 0px，90px 5px，100% 5px，100% 6px，85px 6px，80px 10px，0px 10px)；} h1。网络朋克。glitched { animation-name:glitched；动画-时长：calc(。9s * 1.4)；动画-迭代-计数：无限；动画-计时-功能：线性；} @个关键帧出现故障{ 0% { left:-4px；变换：倾斜(-20度);} 11% { left:2px；变换：倾斜(0度);} 50% {转换：倾斜(0度);} 51% {转换：倾斜(10度);} 60% {转换：倾斜(0度);} 100% {转换：倾斜(0度);} } h1。网络朋克。出现故障：在{ animation-name:出现故障之前；动画-时长：calc(。9s * 2)；动画-迭代-计数：无限；动画-计时-功能：线性；} @个关键帧出现故障前{ 0% { left:-4px；变换：倾斜(-20度);剪辑路径：多边形(0px 0px，85px 0px，90px 5px，100% 5px，100% 6px，85px 6px，80px 10px，0px 10px)；} 11% { left:2px；变换：倾斜(0度);剪辑路径：多边形(0px 0px，85px 0px，90px 5px，100% 5px，100% 6px，85px 6px，80px 10px，0px 10px)；} 50% {转换：倾斜(0度);剪辑路径：多边形(0px 0px，85px 0px，90px 5px，100% 5px，100% 6px，85px 6px，80px 10px，0px 10px)；} 51% {转换：倾斜(0度);裁剪路径：多边形(0px 0px，85px 0px，90px 5px，100% 5px，40% 5px，计算(40% - 30px) 0px，计算(40%-15px)5px，100% 5px，100% 6px计算(45% - 14px) 6px，计算(40% - 29px) 1px，计算(40%-40%)} 60% {转换：倾斜(0度);剪辑路径：多边形(0px 0px，85px 0px，90px 5px，100% 5px，100% 6px，85px 6px，80px 10px，0px 10px)；} 100% {转换：倾斜(0度);剪辑路径：多边形(0px 0px，85px 0px，90px 5px，100% 5px，100% 6px，85px 6px，80px 10px，0px 10px)；}}

金属质感

　　 在赛博朋克2077 的网页里，为了突显科技感，很多页面元素都具有金属质感，如模态弹窗的背景、文本展示块的边框等。这部分内容看看如何实现简单的金属材质背景。

　　四个按钮元素，将被分别添加金、银、铜、钛的金属背景色效果。

　　金纽扣金/button button class= silver 银色银/buttonbutton class=铜牌铜牌铜/buttonbutton class=titanium 钛钛/按钮实现金属光泽效果，主要以下几个个钢性铸铁属性：

　　方框阴影：增加阴影，突出立体质感背景：径向梯度：径向渐变，添加底部阴影背景：线性梯度：线性渐变，主色调背景背景：圆锥梯度：圆锥渐变，最终反光金属效果。依次添加以上三种渐变如下图所示：

　　示例完整实现代码：

　　button { padding:2px；宽度：250像素高度：250像素边框半径：12px边框：凹槽1px透明；}.金色{ 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)；背景：圆锥形渐变(#edc800 、#e3b600 、#f3cf00 、#ffe800 、#ffe900 、#ffe000 、#ebc500 、#e0b100 、#f1cc00 、#fcdc00 、#d4c005fb 、#fad900 、#eec200 、#e7b900 、#f7d300 、#ffe800 、#ffe银色{ box-shadow:inset 0 0 1px # c9c 9，inset 0 1px 2px rgba(255，255，255，0.5)，inset 0 -1px 2px rgba(0，0，0，0.5)；背景：圆锥形渐变(# d7d 7，# c3c3c3c 3，#cccccc，#c6c6c6，#d3d3d3，#d8d8d8，# d8d 8d 3，#c5c5c5，# c0c0c0c 0，#bfbfbf，#d0d0d0，#d9d9d9，#d1d1d1，#c5c5c5，# c8c8c8，# d7d 7，#d5d5d5，#cdcdcd，# C4}。青铜{ box-shadow:inset 0 0 1 px # bc7e 6b，inset 0 1px 2px rgba(255，255，255，0.5)，inset 0 -1px 2px rgba(0，0，0，0.5)；背景：圆锥形渐变(#d95641 、#b14439 、#b2453a 、#d25645 、#d56847 、#b85137 、#b2453a 、#c34f40 、#df4647 、#a94338 、#c94943 、#c85442 、#a4413c 、#d9543a 、#d1564e 、#ab4338)钛{ 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)；背景：圆锥形渐变(#e6c9bf 、#d2b5aa 、#cbaea3 、#d4b5ab 、# e5c 0 BD 、#c5a399 、#e3c6bc 、#e7cac0 、#dec0b5 、#d3b6ab 、#cfada1 、#d4b6ac 、#e2c6c0 、# e2b1a 6 、#d2b1a6 、#d1b4a9 、#e1c4ba 、#e5c9be 、# dec 1结合3种渐变，还能创造出更多复杂好看的金属材质效果，完整代码可预览文章尾部的对应链接。

其他

　　 除了上述几个方面，还有哪些赛博朋克风格的元素是值得我们学习的呢？通过以下几点，也可以提升网页的科技艺术感和用户体验，你有没有更好的想法呢？

　　使用扁平、像素化字体；科技感满满的页面加载动画、滚动动画、滚动条；中/日/英混杂的文案突出未来世界的文化融合；根据鼠标移动增加透视效果，可以看我另一篇文章《赛博朋克2077》 。到此这篇关于半铸钢钢性铸铁(铸造半钢)几步实现赛博朋克2077风格视觉效果的文章就介绍到这了，更多相关半铸钢钢性铸铁(铸造半钢)赛博朋克2077内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。