背景

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

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

! : Y赛博朋克2077》 是一款动作角色类游戏,于 2020年12月10日 登陆各大游戏b A D T平台。故事发生在夜之城,权力更迭和身体改造是这里不变的主题。玩家将扮演一名野心勃勃的雇* { x = w C [佣兵:V,追寻一种独一( F v无二的植入体——获得永生的关键。它以自由的探索性,较高的操控度w K N 9 ~ x & Y以及惊艳的视觉特效收获了一x 0 3 c : T \ m `大批玩家。我非常P H \喜欢 2077 官网的设计风D 1 @ L格,因此本篇文章主要以 20771 P 8 f 0 官网为例,通过几个例子,依g ] (次实现赛博朋克风格元素效果。

实现

高对比, g # |

首先我们来看一下a , ~ 207t J c G I }7 中文官网首页,页面主要以醒目的 明黄色 为主色调,b n ,并小面积使用它的对比色 淡蓝色玫红色 的色块作为点缀,文本和线条边框使用 纯黑色。这一步实现非b v + V \常简单,我们在实现赛博朋x X :克风格的页面时,可以使用上面提到的 黑、紫、绿、蓝、红. L w R ^主色调,再以它们的p i H T y对比色作为按钮、文本提示框,可以实现强烈的视觉冲击。

故障风格按钮

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

<button&g? f f 5 Et;立即加入&lj Y I , It;/button>

故障效$ A I果主要通过 clip-path: inset 和动画实现。利用 butb I ) P % z (ton 的伪元素 ::after,给它定@ 7 v G %义多个分片 --slice 变量,并通^ I v I过动画切换切片的位y F U 3 b . A j w置,来实现晃动效果。其中clip-path 属性使用i Q I q W裁剪方式创建元素n E { k ,的可显示区域。区域内的部分显示,区域外的隐藏。 inset() 方法用于定义一个矩形,可以传入 5 个参数,分别对应 toprightbottomleft的裁O % r | ! 7 g剪位置及 roundra+ { Z [ ) % J 6 Fdius(可选,圆角),它的基本语法如下:

iX # | , ! t N Qnset( <length-percentage>{1,4} [ round <border-radius> ]? )
clip-path: inset(2em 3em 2em 1emF 2 , & J 0 H O . round 2em);

完整实现:

butt; j . ` 5 m Zon, button::after {
width: 300px;
hO Y S d 6 U $eight: 86px;
font-size: 40px;
background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
border: 0;
color:6 8 i #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% -6R r t L ? Rpx 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;
posy F c T k { Lition: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backgn A Iround: 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-pa ( # h F O $ 3 dath: var(--slice-1); transform: translate(-20px, -10px); }
10% { clip-pa6 T o U 7 Dth: var(--slice-3); transform: translate(10px, 10px); }
20% { clip-path: var(--slice-1); transform: translat$ 7 ,e(-10px, 10px); }
30% { clip-path: v! Y L A q ^ W |ar(--slice-3); transform: translate(0px, 5px); }
40% { clip-path: var(--slice-2); transform: tr- g aae g 1 B S d u ;nslate(-5px, 0px); }
50% { clip-path: var(--slice-3); transform: translate(5px, 0px); }
60% { clip-path: var(M f e D--slice-4);S 8 9 I / transform: translate(5px, 10pD [ )x); }
70% { clip-path: vZ # 9ar(--slice-2); transform: translate(-10px, 10px); }
80% { clip-path: var(--slice-5); trI K \ ] \ Cansform: translate(6 ] F ? : 8 8 E20px, -10px); }
90% { clip-path: var(--s| 6 O # ^ d Ilice-1)+ v \ A [ N $; transform: transla+ 3 E ] A 7te(-10px, 0px); }
100% { clip-path: var(--slice-1); transform: translate(0); }
}

故障风格图片

故障效果同样可以应用在文本、图片、视频等媒体展示上,营造满满的科技氛围。这部分内容来看看如何实现故@ R –障风格的图片展示效果。

.glitch 是为图片展示容器主体,它的子元素 glitch__item 用来表示故障条,与上例中 ::after 伪元素作用类似。

<div class="glitch"&gb r a ; Y z qt;
<Z 3 ~ o = [ D X;divW 8 P $ 8 \ d class="glitch__item"></V L E j ! _div>
<!-- ... -->
<div class="glitch__item"></div&g. p T pt;
</div>

故障风格图片和故障风格按钮实现思路基本类似,不过这次用到了 clz / e $ 9 ^ip-path: polygon 实现,polygon 用于j B r x R X m裁切多边形的方法,它的每对值表示裁切元素的坐标。 background-blend-mode 属性定义了A V i I 9 /背景层的混合模式。由于文章篇幅有限,以下代b * b { ( { E [ |码只展示了一个故障条的动画,完整例子可查看文章末尾对应链接

:root {
--gap-horizontal: 18 V g0px;
--gap-vertical: 5px;
--ti` * S # V 2me-anim: 4s;
--delay-anim: 2s;
--blend-mode-1: none;
--blend-color-1: transparent;
}
.glitch {
position: relative;
}
.glitch .glitch__iv } \ m 8 C 9tem {
backgroun# C ` S Pd: url("banner.png") no-repeat 50% 50%/cover;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
.glitch .glitch__item:nth-child(1)_ & j E D i * {
background-color: var(--blend-color-1);
background-blend-mode: var(--blend-mode-1);
animation-duration: var(--time-anim);j ( 7 p
animation-dH U Y *elay: var(--delay-anim);
animation-timing-functi} O 9 ; c C z u ,on: linear;
animation-itz C _ ! 4 . U ]eration-count: infinite;
animation-name:\ ( Q ? } | glitch-anim-1;
}
@keyframes glitch-anim-1 {
0% {
opacity: 1;
transform: transl& h ~ Sate3d(var(--gap-r S D (horizontal), 0,1 Y x 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% { cli{ H r b } C F X /p-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
6% { cle I Y v 7 Hip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
8% { clip-9 7 - D ^ %path: polygon(0 33%, 100% 33%,4 ( e 100% 33%, 0 33%); }
10% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
1- V ~ ] : D2% { cli; ) ` Q bp-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
14% { clip-path: polygon(0 70%, 100% 70%R - J d ~ , B, 100% 70%, 0 70%); }
16% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
18% { clip-path: polygR j b J : C Ron(0 50%, 100% 50%, 100% 55} : m }%, 0 55%); }
20% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%)M W ]; }
21.9% {
opacity: 1;
transform: translate3d(var(--gap-horizontal), 0, 0);
}
22%, 1G M 5 V H00% {
opacity: 0;
transform: translate3d(0, 0, 0);
clip-pathr 5 c: polygon(0 0, 0 0, 0 0, 0 0);
}
}

霓虹元素

在赛博朋克场景中,如电影《银翼杀手》《机壳特工队》、游戏《看门狗》《赛博朋克2077》中无论是在废弃的建筑物 、还是繁华的歌舞町 ⛩️ ,都存在大量6 = { x !的霓虹 neon 元素。我们同样可以使用大量霓虹元素来装饰页面,比如页面标题、按钮、表( v 9 q H ; C N单边框等都可以使用霓虹效果,下面是霓虹文字实现的简要示例:

.neon.flux 两个元素是两个文本载体,将被应用不同的霓虹效果样式和动画。

<div class="neon">CYBER</div>
<div class="flux">PUNK</div>

@ $ ? ^ : e字的霓虹效果主要通过 text-shadow 属性实现,闪烁效果也是通过添加与文字颜色相近的 tet $ r U r ) 8xt-shadow 动画来实现,其中 .neon 元素被应用了 ease-in-out 运动曲线, .flux 元素被应用了 linear 运动曲线,可以看出两者之间的差别吗。9 O G

.neon {
text-sO 4 9 , Dhadow: 0 0 3vw #F4BD0A;
animation: neon 2s easa E _e-in-out infinite;
}
.flux {
text-shaf _ K @dow: 0 0 3vw #179E05;
animation: flux 2s linear infinite;
}
@keyframes neon {
0%, 100% {
text-shadow: 0 0 1vw #FA1C16, 0 0 3v\ i :w #FA1C16, 0 0 10vw #FA1C11 w ; _ )6, 0 0 10vn K F x $ U Kw #FA1C16, 0 0 .4vw #FED128,P / ` .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 #4O s M Y ^ L W0340A;
coK * @ z [ ~lor: #806914;
}
}
@@ @ v @ = / zkeyframes flux {
0%, 100% {
text-shadow:D q G d k 0 0 1vw #10ff4c, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041F} c 0 * h s \ DF, 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: #1| ! 6 ( G o a O79E05;
}
}

~ b X I g R 2 o f了使文字看起来更有霓虹效果,以上示例使用了 neon 字体:https://s3-us-west-2.amt L n {azonaws.com/s.cdpn.io/707108/neo? M G Q X D # F rn.ttf

不规则文本框

赛博朋U d ] # y f ! – E克2077中可以看到很多文本展示框都是这种不规则图形的,是不是很酷呢,这部分内容将介绍如何实现c j f 9 2077 风格的文本框。

上面 3 个文本框分别由3p 标签构成,.inverse 类表$ [ ] i g示反色背景,.dotted 将实现点状背景。

<p class="cyberpunk">经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘,一个弥漫反乌托邦氛围的未来:日常生活受到急剧改变的科技影响,普及的计算机化信息笼罩全球,以及侵入性的人体改造。&lb ` , r i K 4t;/p>
<p class="cyberpunk inverse"&X w Y Bgt;经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘,一个弥漫反乌托邦氛围的未来:日常生活受到急剧改变的科技影响,普及的计算机化信息笼罩全球,以及侵入性的人体改造。</p>
<p class="cyberpunk inverseZ 3 = 1 dotted">经典的赛博朋克角色是边缘且性格疏远的独行者。他们生活在社会群体的边缘,一个弥漫反乌托邦氛围的未来:日常生活q J # _ o W | Y L受到急剧改变的科技影响,普及的计算机化信息笼罩全球,以及侵入性的人体改造。</p>

文本框不规则的形状主要由 clip-path: polygon 实现,通过以下几个坐标的裁切,就可以实现 2077 风格的多边形了。

clip-path: polygon(
0px 25px,
26px 0px,
cau U , k 4lc(6F o N 0 s \ S L \0% - 25px) 0px,
60% 25px,
100% 25px,
100% calc(100% - 10px),
calc(100% - 15px) calc(100% -D e B c O b F R 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;
}
.cyO z # u R Sberpunk {
padding: 5px;
position: relative;
font% n = t h 2 I-size: 1.2rem;
color: var(--yellow-color);
border: 30px solid var(--yellow-color);
border-right: 5px solid var(--yel^ S % _ e Hlow-color);
border-lefR p nt: 5px solid var(--yellow-color);
border-bottom:9 Z C m 1 i \ 24px solid var(--yellow-color)m S f ~;
background-color: #000;
clip-path: polygon(0px 25px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 25px, 100% calc(100% - 10px), calU m t 9 Z ?c(100% - 15px) cals g 7 % Zc(100% - 10px), calc(80% - 10px) calc(100% - 1c d Z _ q # o / s0px), calc(80% - 15px) 100%, 80px cae e q H Clc(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# 0 i * V var(--border-color)l = ! o e h p;
}
.dotted, .dotted:before,L ] t g p $ X .dotted:after {
b% o 8 $ o nackground: var(-\ ] u-yellow-; . E O xcolor);
background-image: radia 6 8 A j @ ? h #al-gradient(#00000021 1px, transparent 0);
backgB @ 4 + [ 5 Kround-size: 5px 5px;
background-position: -13px -3px;
}
/* 文本框右侧小编号样式 */
.cyberpunk:before {
content: "P-14";
display: block;
positi{ . V s ] 7 son: absolute;
bottom: -12px;
r} y r 2 H h Vight: 25px;
padding: 2px 2px 0px 2px;
font-size: 0.6rem;
line-height: 0.6rem;
color: #000;
background-color: var(--yellow-color);
border-left: 2px2 w C l Y _ x solid var(--border-color);
}
.cyberpunk.inverse:before {
content: "T-71";
right: 90px;
bottom: 9px;
}
.cyberpunk.inverse:before, .cyberN V Qpunk:before {
backgroM $ p wund-color: #000;
color: var(--y@ V : G - Kellow-color);
}

炫酷的表单元素

2077 的表单也很有特色,输入框元素 inputtextarea 同样可以使用 clip-path: polygon 实现不规则形状,单选框和多选框则可以利用伪元素:before:after 进行装饰。

<i3 ] q f H B _nput class="cyberpunk" type="th g sext" placeholder="input 输入框u Z ^ 5 q" />
<textarg l C Q v + zea clasN v e m C I Ss="cyber| / 1punk" plE 6 k 0 - M G e 1aceholder="textare7 w \ 5 Fa 文本Z S i [ , 3 k _框">&l? ; N T gt;/textarea>
<label class="cyberpunkc u m . & K D"><input class="cyberpunk" name="test" typeX g P n K N B 2="radio0 t C M - | I @ L" />单选框1</label>
&lu z } R \ L O }t;label class="cybe( V j $ . [rpunk"><input class="cyberpunk" name="test" type="rm - q } y / Tadio" />单选框2~ 7 [</labeB f n }l><br />
<label class="ck ) C Oyberpunk"&gF u T T E n i 5 dtZ J P *;<input class="cyberpunk" type="checkbox" />多选框</I m ( g h b - Plabel>&l[ A $ a 0 \ ut;br />

完整实现如下:

input[type="text"].cyberpunk, textarea.cyberpunk {
width: calc(100% - 30px);
border:b h Y x @ 1 y 30px solid #000;
border-left: 5px solid #000;
border-right: 5px solid #000;
border-botc 8 ~tom: 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) cal) V + 5 ~ B jc(100% - 10px), calc(80% - 10px) calc~ v s z y ( 8(100% - 10px), calc(80% - 15px) calc(100% - 0px), 10px calc(100% - 0px), 0% calc(100% - 10px));
padding: 12px;
}
input[type="radio"].cyberpup + 1nk {
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: "";
d2 H Kisplay: block;
width: 8px;
height: 6px;
background-color: var(--yellow-color);
position: ah ~ t p \ f } hbsolut4 Q 2 z x M : { }e;
top: 2px;
left: 2px;
transition: background 0.3s, left 0.3s;
}
input[type="radio"].cyberpunk:checked:afb _ w E # F u Q Ater {
background-color:: ] f # b F # var(--border-color)g % B V;
left: 10px;
}
input[type="checkbox"].cybe{ ; {rpunk {
border-radius: 15%;f 9 V h
z-index: 100;
height: 20px;
width: 20px;
appearance: none;
outline: none;
background-color: #000;
cursor: pointer;
position: relative;
margin: 0px;
maj 7 D ] ` mrgX b 9 P M % x Fin-bottom: -3px;
display: inline-block;
}
input[type="checkbox"].cy! R ; n n tberpunk:beA R - * 7fore {
content: "";
displ& M , + /ay: block;
width: 8px;
height: 8- 8 + 6px;
border* V t G h !: 2pX , $ t ?x solid var(--5 h ( L D ^ A ]yellow-color);
border-top: 2px solid transparent;
border-radius: 50%;
position: absolute;
top: 5px;
left: 4px;
}
input[type="checkbox"].cybeR W yrpunk:after {
content: "";
dN p $ f M Misplay: block;
width: 2px;
height: 7px;
background-color: var(--yellow-col# V O 0or);
position: absolute;
top: 3px;
left: 9px;
}
input[type="checkbox"].cyberpunk:checked:k O - 5 U 6 v . vbefore {
border-coL : m k X 9 *lor: var(--border-color);
border-top-color: transparent;
}
input[type="checkbox"].cyberpunk:checked:a: X ofter {
background-cok p * ? B P ? ,lor: var(--border-color);
}p E X . g , d

标题和文本

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

<h1 class="cyberpunk">H1 title<M q _ b P ] %;/h1>
<h1 clasA F V v R [ [ 4 !s="cyberpunk glitched">H1 title glitO c g ( = [ched</h1>
h1.cyberpunk {
position: relative;
}
h1.cyberpunk:before {
content: "";
display: bloc/ # ok;
position: absolute;
bottom: 0px;
left: 2px;
width: 100%;
height: 10px;
background-color: #000;
clip-path:+ k R } 0 + - polygon(0px 0px, 85px 0px, 90px 5px, 100% 5pf * : d k kx, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
}
h1.cyberpunk.glitched {
animation-} 4 O I I U s vname_ , M J \ & D: glitched;
animation-duration: calc(.9s * 1.4);
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes glitched {
0% { left: -4px; transform: skew(-20deg)N W I M / z E /; }
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;
animat@ T 5 z 8 _ion-timing-functio$ B =n: linear;
}
@keyframes before6 E ! G 6 ! k Rglitchn m )ed {
0% {
left: -4px;
transform: skew(-20deg);
clip-pa+ o x / o Dth: polyT * Z 1 1 M l [ ^gon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85pxk , | s r 6pB 5 K - F ^ [ vx, 80px 10px, 0px 10px);
}
11% {
left: 2px;
tran% 1 ^ o ; ]sform: skew(0deg);
clip-path: po) : Z a E d M }lygon(0px 0px, 85px 0px, 90px 5p5 i fx, 100% 5px, 100% 6px, 85px 6px,g v ~ z P M l v 80pu t z *x 10px, 0px 10px);
}
50% {
transform: sk` O mew(0deg);
clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px,k ? ~ { 7 j i Q n 85px 6px, 80px 10px, 0px 10px);
}
51% {
transform: skew(0deg);
clip-path: polygon(0px 0pxn D 6, 85px 0pl R Zx,& : i 2 C c w 90px 5px, 100% 5px, 40% 5px, calc(40% - 30px) 0px, calc(40% + 30px) 0px, caJ k Ilc(45% - 15px) 5px, 100% 5px, 100% 6pxu Y j 4 4 S R V, calc(45% - 14px) 6px, calc(40% + 29px) 1px, calc(40% - 29px) 1px, calcl P ` ] p(40% + 1px) 6px, 85px 6px, 80px 10px, 0px 10px);
}
60% {
transfoN ` A R 3 . } * urm: skew(0deg);
clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px,; E B ( r 85px 6px, 80px 10p6 _ a Mx, 0px 10px);
}
100% {
transform: skew(0det m R $ % @ e sg);
clip-path: py $ = p Nolygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
}
}

金属质感

赛博! } _ G _ p W , K朋克2077 的网页里,为了突显科技M Q U F感,很多0 Q 7 E y – z C 2页面元素都具有金属质感,如模态弹窗的背景、文本展示块的边框等。这部分内容看看如何实现简单的金属材质背景。

4个 button 元素,将被分别添加 金、银、铜、钛 的金属背景l u =色效果。` * & a r r Y

<button class="gold">gold 金</button>
<button class="silver">silver 银</button&0 ^ m p k F ugt;
<button class="bronzeg ) +">bronze 铜</button>
<button clt Z 3 T r T oass="titanium">titanium 钛</button>

实现金属光泽效果,主要以下几个个css 属性:

  • box-shJ ! / 3 \ ] Q R Uadow:增加阴影,突出立体质感。
  • background: radial-gradieO } $ E 0 ? ( Nnt:径向渐变,添加底部阴影。
  • b{ \ | Wackground: linear-gradient:线性渐变,主色调背景4 # x ! M 6 n
  • background: conic-gradient:圆锥渐变,最终反光金属效果。

依次添加以上三种渐变如下图所示:

示例完整实现代码:

button {
padding: 2px;
width: 250px;
height:l 2 A 250px;
border-radius: 12px;
border: groove 1px transparent;
}
.gold {
box-shadow:x % h L W ~ / [ 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,I 8 G c a = % #d4S V A - 2c005fb, #fad900, #eec200, #e7b900, #f7d300, #ffe800, #ffe300, #f5d100, #e6b900, #e3~ 3 lb600, #f4d000, #ffe400, #ebc600, #e3b600, #f6Y O q = G H E 1d500, #ff^ 6 ~ de900, #ffe^ 5 a z o D /90a, #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-red 4 gpeat border-box;
}
.silver {
box-shadow: inset 0 0 0 1px #c9c9c9, inset 0 1px 2px rgba(25r m g | } V D } {5, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.5);
background: conic-gradientI 9 e s(#d7d7d7, #c3c3c3, #cccccc, #c6c6c6, #d3d3d3, #d8d8d8, #d5d5d5, #d8d8d8, #d3d3) y Dd3, #c5c5c5, #c0c0c0, #bfbfbf, #d0d0d0, #d9d9d9, #d1d1d1, #c5c5c5, #c8c8c8, #d7d7d7, #d5d5d5, #cdcdn ( G 0cd, #c4c4c4, #d9d9d9, #cecece,K ` 9 3 #c5c5c5, #c5c5c54 . s X 0 W i, #cdcdcd, #d8d8d8, #d9d9d9, #d7d7d7) content3 Q r I ; B-box, linear-gradient(#d4d4d4, #d4d% % u d * Y I4d4) padding-box, radial-gradient(rgba(120, 120, 120, 0.9), rgba(120, 120, 120, 0) 70%) 50% bottom/80% 0.40 E ( B6875em no-repeat border-box;
}
.bronze {
box-shadow: inset 0 0 0 1px #bc7e6o K Y p Q P = $ Hb, inset 0 1px 2px rgba(p | 7255, 255, 255, 0.5l Q X i *), inset 0 -1px 2px rgba(0, 0, 0, 0.5);
background: conic-gradient(#d9; . 75641, #b14439, #b2453a, #d25645, #d56847, #d05441, #b851~ f W37, #b2453a, #c34f40, #df4647, #a94338, #c94943,i g _ K e #c85442, #a4413c, #d9543a, #d1564e,E x P p * i B 0 0 #ab4338, #bb4a3c, #dc5843, #b94839, #aa4- R p c237, #c24e42, #ce523f,9 V % S ] a A ? #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, 1C \ =20, 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, 27 6 a b55, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.5);
background: conic-gradient(#e6c9bf, #d2b5aa, #cbaea3, #d4b5ab, #e5c3bd, #d9c0b4, #d9bcb1, #c52 - } X L Ra399, #e3c6bc, #e7cac0, #dec0b5, #d3b6ab,2 * \ B Q P #cfada1, #d , $ $ w F I fd4b6ac, #e2c6c0, #e2c6c0, #d2b1a6, #d2b1a6, #d1* x 1 : ~ b d tb4a* 3 ^ s W D9, #e1c4ba, #e5c9be, #dec1b6, #d3b6ab, #ceb0a6, #cfada3, #d2b5aa, #dabdb2, #e5c9be, #e6c9bf) content-box, linear-gradient(#e5c9be, #e5c9be) padding-box, radial-_ U g e _ _ 2 ngradient(rgba(120,x Q X O # V ~ 120, 120, 0.9), rgba(120, 120, 120, 0) 70%) 50% bottom/80% 0.4687} ; 3 \5em no-repeat border-box;
}

结合 3 种渐变,还能创造出更多复杂好看的金属材质效果,完整代码可预览文章尾部的对应链接

其他

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

  • 使用扁平、像素化字体;
  • 科技感满满的页面加g X s O + A Q \ X载动画、滚动动画、滚动条;
  • 中/日/英混杂的文案突出未来世界的文化融合;
  • 根据鼠标移动增加透视效果,可以看我另一篇文章 《如何在CSS中映射的鼠标位置,/ g 7 2 \ i并实现通过鼠标移动控制页面元素效果》

阅读更多

  • 故障图片效果示例完整版 https://codepen.io/dragonir/fullH n h ; L L @ R/oNZPLZ s p Ozo
  • t u e ? G k杂的金属效果 https://codepen.io~ U {/dragonir/full/jOBvrZP
  • 标题文本 https://codepen.io/dru f ,agonir/full/vYxzwGG
  • 赛博朋克404页Z G g e n 7 u a 7面 https://codepen.io/ltrademark/pen/xpgprZ

作者:dragonir 本文地址:https://www.cnblogs.com/dragonir/p/14878001.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注