点击上方关注前端技术江湖,一起学习,天天进步
作者dragonir
原文链接:/post/6972759988632551460
文章开始之前先简单了解下什么是赛博朋克
,以及什么是赛博朋克2077
。
赛博朋克(Cyberpunk)是“控制论、神经机械学”与“朋克”的结合词,背景大都建立于“低端生活与高等科技的结合”,拥有先进的科学技术,再以一定程度崩坏的社会结构做对比;拥有五花八门的视觉冲击效果,如街头的霓虹灯、街排标志性广告以及高楼建筑等,通常搭配色彩是以黑、紫、绿、蓝、红为主。其中菲利普·狄克所著作的《仿生人会梦到电子羊吗?》最受注目,小说亦被改编成电影《银翼杀手》。总的来讲,赛博朋克的风格主线,就是反应出科技高度发展的人类文明,与脆弱渺小的人类个体之间的强烈反差,同时外界与内在,钢铁与肉体,过去与未来,现实与虚幻等矛盾在其中交织。
《赛博朋克2077》
是一款动作角色类游戏,于12月10日
登陆各大游戏平台。故事发生在夜之城,权力更迭和身体改造是这里不变的主题。玩家将扮演一名野心勃勃的雇佣兵:V
,追寻一种独一无二的植入体——获得永生的关键。它以自由的探索性,较高的操控度以及惊艳的视觉特效收获了一大批玩家。我非常喜欢2077
官网的设计风格,因此本篇文章主要以2077
官网为例,通过几个例子,依次实现赛博朋克风格元素效果。
实现
高对比度
首先我们来看一下2077
中文官网首页,页面主要以醒目的明黄色
为主色调,并小面积使用它的对比色淡蓝色
、玫红色
的色块作为点缀,文本和线条边框使用纯黑色
。这一步实现非常简单,我们在实现赛博朋克风格的页面时,可以使用上面提到的黑、紫、绿、蓝、红
为主色调,再以它们的对比色作为按钮、文本提示框,可以实现强烈的视觉冲击。
故障风格按钮
故障效果是一种显示设备崩坏效果,在2077
官网中应用很多,我们先来实现button
在hover
时产生故障效果。
<button>立即加入</button>
故障效果主要通过clip-path: inset
和动画实现。利用button
的伪元素::after
,给它定义多个分片--slice
变量,并通过动画切换切片的位置,来实现晃动效果。其中clip-path
属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。inset()
方法用于定义一个矩形,可以传入5
个参数,分别对应top
,right
,bottom
,left
的裁剪位置及round
和radius
(可选,圆角),它的基本语法如下:
inset(<length-percentage>{1,4}[round<border-radius>]?)clip-path:inset(2em3em2em1emround2em);
完整实现:
button,button::after{width:300px;height:86px;font-size:40px;background:linear-gradient(45deg,transparent5%,#FF013C5%);border:0;color:#fff;letter-spacing:3px;line-height:88px;box-shadow:6px0px0px#00E6F6;outline:transparent;position:relative;}button::after{--slice-0:inset(50%50%50%50%);--slice-1:inset(80%-6px00);--slice-2:inset(50%-6px30%0);--slice-3:inset(10%-6px85%0);--slice-4:inset(40%-6px43%0);--slice-5:inset(80%-6px5%0);content:'立即加入';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent3%,#00E6F63%,#00E6F65%,#FF013C5%);text-shadow:-3px-3px0px#F8F005,3px3px0px#00E6F6;clip-path:var(--slice-0);}button:hover::after{animation:1sglitch;animation-timing-function:steps(2,end);}@keyframesglitch{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
伪元素作用类似。
<divclass="glitch"><divclass="glitch__item"></div><!--...--><divclass="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-repeat50%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;}@keyframesglitch-anim-1{0%{opacity:1;transform:translate3d(var(--gap-horizontal),0,0);clip-path:polygon(02%,100%2%,100%5%,05%);}2%{clip-path:polygon(015%,100%15%,100%15%,015%);}4%{clip-path:polygon(010%,100%10%,100%20%,020%);}6%{clip-path:polygon(01%,100%1%,100%2%,02%);}8%{clip-path:polygon(033%,100%33%,100%33%,033%);}10%{clip-path:polygon(044%,100%44%,100%44%,044%);}12%{clip-path:polygon(050%,100%50%,100%20%,020%);}14%{clip-path:polygon(070%,100%70%,100%70%,070%);}16%{clip-path:polygon(080%,100%80%,100%80%,080%);}18%{clip-path:polygon(050%,100%50%,100%55%,055%);}20%{clip-path:polygon(070%,100%70%,100%80%,080%);}21.9%{opacity:1;transform:translate3d(var(--gap-horizontal),0,0);}22%,100%{opacity:0;transform:translate3d(0,0,0);clip-path:polygon(00,00,00,00);}}
霓虹元素
在赛博朋克场景中,如电影《银翼杀手》《机壳特工队》、游戏《看门狗》《赛博朋克2077》中无论是在废弃的建筑物????
、还是繁华的歌舞町⛩️
,都存在大量的霓虹neon
元素。我们同样可以使用大量霓虹元素来装饰页面,比如页面标题、按钮、表单边框等都可以使用霓虹效果,下面是霓虹文字实现的简要示例:
.neon
和.flux
两个元素是两个文本载体,将被应用不同的霓虹效果样式和动画。
<divclass="neon">CYBER</div><divclass="flux">PUNK</div>
文字的霓虹效果主要通过text-shadow
属性实现,闪烁效果也是通过添加与文字颜色相近的text-shadow
动画来实现,其中.neon
元素被应用了ease-in-out
运动曲线,.flux
元素被应用了linear
运动曲线,可以看出两者之间的差别吗。????
.neon{text-shadow:003vw#F4BD0A;animation:neon2sease-in-outinfinite;}.flux{text-shadow:003vw#179E05;animation:flux2slinearinfinite;}@keyframesneon{0%,100%{text-shadow:001vw#FA1C16,003vw#FA1C16,0010vw#FA1C16,0010vw#FA1C16,00.4vw#FED128,.5vw.5vw.1vw#806914;color:#FFFC00;}50%{text-shadow:00.5vw#800E0B,001.5vw#800E0B,005vw#800E0B,005vw#800E0B,00.2vw#800E0B,.5vw.5vw.1vw#40340A;color:#806914;}}@keyframesflux{0%,100%{text-shadow:001vw#10ff4c,003vw#1041FF,0010vw#1041FF,0010vw#1041FF,00.4vw#8BFDFE,.5vw.5vw.1vw#147280;color:#03C03C;}50%{text-shadow:00.5vw#024218,001.5vw#024713,005vw#023812,005vw#012707,00.2vw#022201,.5vw.5vw.1vw#011a06;color:#179E05;}}
为了使文字看起来更有霓虹效果,以上示例使用了
neon
字体:s3-us-west-/s.cdpn.io/7…[1]
不规则文本框
赛博朋克2077中可以看到很多文本展示框都是这种不规则图形的,是不是很酷呢,这部分内容将介绍如何实现2077
风格的文本框。
上面3
个文本框分别由3
个p
标签构成,.inverse
类表示反色背景,.dotted
将实现点状背景。
<pclass="cyberpunk">经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘,一个弥漫反乌托邦氛围的未来:日常生活受到急剧改变的科技影响,普及的计算机化信息笼罩全球,以及侵入性的人体改造。</p><pclass="cyberpunkinverse">经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘,一个弥漫反乌托邦氛围的未来:日常生活受到急剧改变的科技影响,普及的计算机化信息笼罩全球,以及侵入性的人体改造。</p><pclass="cyberpunkinversedotted">经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘,一个弥漫反乌托邦氛围的未来:日常生活受到急剧改变的科技影响,普及的计算机化信息笼罩全球,以及侵入性的人体改造。</p>
文本框不规则的形状主要由clip-path: polygon
实现,通过以下几个坐标的裁切,就可以实现2077
风格的多边形了。
clip-path:polygon(0px25px,26px0px,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%,80pxcalc(100%-0px),65pxcalc(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:30pxsolidvar(--yellow-color);border-right:5pxsolidvar(--yellow-color);border-left:5pxsolidvar(--yellow-color);border-bottom:24pxsolidvar(--yellow-color);background-color:#000;clip-path:polygon(0px25px,26px0px,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%,80pxcalc(100%-0px),65pxcalc(100%-15px),0%calc(100%-15px));}.cyberpunk.inverse{border:none;padding:40px15px30px;color:#000;background-color:var(--yellow-color);border-right:2pxsolidvar(--border-color);}.dotted,.dotted:before,.dotted:after{background:var(--yellow-color);background-image:radial-gradient(#000000211px,transparent0);background-size:5px5px;background-position:-13px-3px;}/*文本框右侧小编号样式*/.cyberpunk:before{content:"P-14";display:block;position:absolute;bottom:-12px;right:25px;padding:2px2px0px2px;font-size:0.6rem;line-height:0.6rem;color:#000;background-color:var(--yellow-color);border-left:2pxsolidvar(--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
进行装饰。
<inputclass="cyberpunk"type="text"placeholder="input输入框"/><textareaclass="cyberpunk"placeholder="textarea文本框"></textarea><labelclass="cyberpunk"><inputclass="cyberpunk"name="test"type="radio"/>单选框1</label><labelclass="cyberpunk"><inputclass="cyberpunk"name="test"type="radio"/>单选框2</label><br/><labelclass="cyberpunk"><inputclass="cyberpunk"type="checkbox"/>多选框</label><br/>
完整实现如下:
input[type="text"].cyberpunk,textarea.cyberpunk{width:calc(100%-30px);border:30pxsolid#000;border-left:5pxsolid#000;border-right:5pxsolid#000;border-bottom:15pxsolid#000;clip-path:polygon(0px25px,26px0px,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),10pxcalc(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:background0.3s,left0.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:2pxsolidvar(--yellow-color);border-top:2pxsolidtransparent;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
等元素增加下划线装饰和故障动画效果,下面来看看如何实现这样的文字效果的。
<h1class="cyberpunk">H1title</h1><h1class="cyberpunkglitched">H1titleglitched</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(0px0px,85px0px,90px5px,100%5px,100%6px,85px6px,80px10px,0px10px);}h1.cyberpunk.glitched{animation-name:glitched;animation-duration:calc(.9s*1.4);animation-iteration-count:infinite;animation-timing-function:linear;}@keyframesglitched{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;}@keyframesbeforeglitched{0%{left:-4px;transform:skew(-20deg);clip-path:polygon(0px0px,85px0px,90px5px,100%5px,100%6px,85px6px,80px10px,0px10px);}11%{left:2px;transform:skew(0deg);clip-path:polygon(0px0px,85px0px,90px5px,100%5px,100%6px,85px6px,80px10px,0px10px);}50%{transform:skew(0deg);clip-path:polygon(0px0px,85px0px,90px5px,100%5px,100%6px,85px6px,80px10px,0px10px);}51%{transform:skew(0deg);clip-path:polygon(0px0px,85px0px,90px5px,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,85px6px,80px10px,0px10px);}60%{transform:skew(0deg);clip-path:polygon(0px0px,85px0px,90px5px,100%5px,100%6px,85px6px,80px10px,0px10px);}100%{transform:skew(0deg);clip-path:polygon(0px0px,85px0px,90px5px,100%5px,100%6px,85px6px,80px10px,0px10px);}}
金属质感
在赛博朋克2077
的网页里,为了突显科技感,很多页面元素都具有金属质感,如模态弹窗的背景、文本展示块的边框等。这部分内容看看如何实现简单的金属材质背景。
4个button
元素,将被分别添加金、银、铜、钛
的金属背景色效果。
<buttonclass="gold">gold金</button><buttonclass="silver">silver银</button><buttonclass="bronze">bronze铜</button><buttonclass="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:groove1pxtransparent;}.gold{box-shadow:inset0001px#eedc00,inset01px2pxrgba(255,255,255,0.5),inset0-1px2pxrgba(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.46875emno-repeatborder-box;}.silver{box-shadow:inset0001px#c9c9c9,inset01px2pxrgba(255,255,255,0.5),inset0-1px2pxrgba(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.46875emno-repeatborder-box;}.bronze{box-shadow:inset0001px#bc7e6b,inset01px2pxrgba(255,255,255,0.5),inset0-1px2pxrgba(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.46875emno-repeatborder-box;}.titanium{box-shadow:inset0001px#c7aca0,inset01px2pxrgba(255,255,255,0.5),inset0-1px2pxrgba(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.46875emno-repeatborder-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-/s.cdpn.io/707108/neon.ttf:/?target=https%3A%2F%2Fs3-us-west-%2Fs.cdpn.io%2F707108%2Fneon.ttf
[2]
https://codepen.io/dragonir/full/oNZPLzo:/?target=https%3A%2F%2Fcodepen.io%2Fdragonir%2Ffull%2FoNZPLzo
[3]
https://codepen.io/dragonir/full/jOBvrZP:/?target=https%3A%2F%2Fcodepen.io%2Fdragonir%2Ffull%2FjOBvrZP
[4]
https://codepen.io/dragonir/full/vYxzwGG:/?target=https%3A%2F%2Fcodepen.io%2Fdragonir%2Ffull%2FvYxzwGG
[5]
https://codepen.io/ltrademark/pen/xpgprZ:/?target=https%3A%2F%2Fcodepen.io%2Fltrademark%2Fpen%2FxpgprZ
The End
欢迎自荐投稿到《前端技术江湖》,如果你觉得这篇内容对你挺有启发,记得点个「在看」哦
点个『在看』支持下