纯 CSS 自写一个 刀剑神域 SAO UI 的 HP Bar

觉得刀剑神域序这部神番的 SAO UI 好好看呀~~ 哇哇哇~~~ 想尝试着用 CSS 自己写一个(虽然想着就麻烦),就当练习一下 CSS,看看我能不能写的出来。结果受尽折磨,虽然还有点意思。。。CSS 来做嘛,效果不是很好,仔细看能看出中间边框那里有一点点瑕疵,斜切的效果比较难搞。。特别是血量的中间部分(喷血

需要实现的效果,原剧截图:

SAO UI 字体

从左往右看,首先去找 SAO UI 的字体。

Google 一哈找到了 sao-ui-font

边框 + 两层 box-shadow

可以这样写:box-shadow: inset 9px 0px 8px 2px rgba(125, 125, 125, 0.61), inset 0.3px 0px 0 2px rgba(0, 0, 0, 0.53); (内黑边 + 内阴影)

通过 inset 指定阴影显示在容器的 内 边缘

然后再加一圈 Border:border: 2px solid #d5d628;

最终效果:

渐变背景怎么搞?

background: linear-gradient(red, green, blue);

这种骚渐变,用来做骚网站最适合不过。

最麻烦的血量指示器斜切

1
2
3
<div class="wrap">
<div class="card"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap {
width: 60px; /* 预先设定一个 width */
height: 30px;
overflow: hidden; /* 让超出 div.wrap 的部分不显示 */
}

.card {
height: 100%;
width: 54px;
transform: skewX(-30deg); /* 用 skewX 来让 div 倾斜 */
margin-left: -8px; /* 将 div 往左移(结合 overflow 隐藏左侧),只显示右侧倾斜 */
background: #84de1c;
}

实现效果:

最后将血量拆分为 4 个 div 部分(正 + 斜 + 正 + 斜),用 position: absolute 的方法一个一个拼起来

P.S. 其实可以拆分为 3 个部分(正 + 斜 + 斜)… 算了… 懒得改了

我把边框做成单独的一层,position: absolute,然后 z-index 设置为最大(置顶),同理和血量一起倾斜

HTML 结构是这样的。。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="hp-border">
<div class="hp-border-left">
<div class="hp-border-left-inner"></div>
</div>
<div class="hp-border-left-sloping">
<div class="hp-border-left-sloping-inner"></div>
</div>
<div class="hp-border-right">
<div class="hp-border-right-inner"></div>
</div>
<div class="hp-border-right-sloping">
<div class="hp-border-right-sloping-inner"></div>
</div>
</div>

<div class="hp-value-wrap">
<div class="hp-value-mask"></div>
<div class="hp-value-left"></div>
<div class="hp-value-left-sloping">
<div class="hp-value-left-sloping-inner"></div>
</div>
<div class="hp-value-right"></div>
<div class="hp-value-right-sloping">
<div class="hp-value-right-sloping-inner"></div>
</div>
</div>

部分 CSS(比较乱,可能重复的代码未整理):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/* hp-value */
.hp-value {
position: relative;
width: 365px;
height: 25px;
}

.hp-value-mask {
position: absolute;
z-index: 3;
background: linear-gradient(rgba(74, 74, 74, 0.5), rgba(74, 74, 74, 0.24), rgba(74, 74, 74, 0));
width: 99%;
height: 13px;
top: 0;
left: 0;
}

.hp-value-left {
z-index: 2;
top: 0;
left: 0;
width: 55%;
height: 25px;
position: absolute;
background: #84de1c;
}

.hp-value-left-sloping {
z-index: 2;
top: 0;
left: 55%;
width: 5%;
height: 25px;
position: absolute;
overflow: hidden;
}

.hp-value-left-sloping-inner {
height: 100%;
width: calc(100% + 31px);
margin-left: -30px;
transform: skewX(-30deg);
background: #84de1c;
}

.hp-value-right {
z-index: 2;
top: 0;
left: 60%;
width: 35%;
height: 15px;
position: absolute;
background: #84de1c;
}

.hp-value-right-sloping {
z-index: 2;
top: 0;
left: 95%;
width: 5%;
height: 15px;
position: absolute;
overflow: hidden;
}

.hp-value-right-sloping-inner {
height: 100%;
width: calc(5% + 38px);
margin-left: -30px;
background: #84de1c;
transform: skewX(-30deg);
}

/* hp-border */
.hp-border {
width: 100%;
height: 30px;
}

.hp-border > div {
position: absolute;
top: 0;
z-index: 4;
}

.hp-border-left {
left: 0;
height: 30px;
width: 57.3%;
overflow: hidden;
}

.hp-border-left-inner {
height: 25px;
width: calc(100% + 20px);
border: 2px solid #d5d628;
box-shadow: inset 0 0px 8px 2px rgba(125, 125, 125, 0.61), inset 0 0px 0 2px rgba(0, 0, 0, 0.53);
}

.hp-border-left-sloping {
left: 57.3%;
height: 30px;
width: 2.7%;
overflow: hidden;
}

.hp-border-left-sloping-inner {
height: 25px;
border: 2px solid #d5d628;
border-right-width: 2px;
box-shadow: inset 9px 0px 8px 2px rgba(125, 125, 125, 0.61), inset 0.3px 0px 0 2px rgba(0, 0, 0, 0.53);
width: calc(100% + 32px);
margin-left: -32.95px;
transform: skewX(-35deg);
}

.hp-border-right {
left: 60%;
height: 20px;
width: 36%;
overflow: hidden;
}

.hp-border-right-inner {
height: 14px;
border: 2px solid #d5d628;
box-shadow: inset 0 0px 8px 1.7px rgba(125, 125, 125, 0.61), inset 0 0px 0 2px rgba(0, 0, 0, 0.53);
width: calc(100% + 40px);
margin-left: -32px;
transform: skewX(-30deg);
}

.hp-border-right-sloping {
left: 96%;
height: 20px;
width: 5%;
overflow: hidden;
}

.hp-border-right-sloping-inner {
height: 14px;
border: 2px solid #d5d628;
border-right-width: 2.5px;
box-shadow: inset 9px 0px 8px 2px rgba(125, 125, 125, 0.61), inset -0.4px 0px 0 2px rgba(0, 0, 0, 0.53);
width: calc(100% + 31px);
margin-left: -41.6px;
transform: skewX(-30deg);
}

不知道有没有更简便的方法。。(估计也没有了,毕竟是拿 CSS 来做)

其余部分

闪电 SVG 图标:

1
<svg viewBox="0 0 72.89 111.59"><path d="M45.27,119.72a3.49,3.49,0,0,0,1.34.53A3.77,3.77,0,0,0,50.05,119L99.81,64.31a4.22,4.22,0,0,0,1-4.1,3.89,3.89,0,0,0-3-2.71L73.18,53.26,86.91,14.17a4.18,4.18,0,0,0-1.4-4.79,3.66,3.66,0,0,0-4.74.44L29.37,59.46a4.19,4.19,0,0,0-1.16,4.17,3.83,3.83,0,0,0,3.05,2.83l27.2,4.66-14.69,43.8A4,4,0,0,0,45.27,119.72Z" transform="translate(-28.05 -8.7)"></path></svg>

闪电图标块外发光: box-shadow: 0 0 3px #f3f315;

血量上的阴影 遮罩层 <div class="hp-value-mask"></div>

1
2
3
4
5
6
7
8
9
.hp-value-mask {
position: absolute;
z-index: 3;
background: linear-gradient(rgba(74, 74, 74, 0.5), rgba(74, 74, 74, 0.24), rgba(74, 74, 74, 0));
width: 99%;
height: 13px;
top: 0;
left: 0;
}

最终效果

qwqcode.github.io/SAO-UI/SAO_HP_Bar_CSS.html

开了一个 GayHub 仓库 -> 传送门,以后自写的 SAO UI 就都放这里面啦 ٩(ˊᗜˋ*)و

本站文章除注明转载外均为原创,未经允许不要转载哇. ヾ(゚ー゚ヾ) http://qwqaq.com/e90e2cd7.html
分享到