先上对比图
原图地址
html结构
css部分
锻炼css中，先从基础的开始。【才不是最近玩泰拉瑞亚入迷的原因
纯css绘制之terraria史莱姆
1
2
3
4
5
6
7
8
9
10
11
<div class="slime-wrapper">
<div class="slime-body">
<div class="slime-light-1">
<div class="slime-light-2">
<div class="slime-light-3"></div>
</div>
</div>
</div>
<div class="slime-btm-line">
</div>
</div>
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
.slime-wrapper {
width: 162px;
height: 107px;
overflow: hidden;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -53px;
margin-left: -81px;
}
.slime-body {
width: 160px;
height: 122px;
border: 1px solid #202c44;
background-color: #4b7adf;
border-radius: 50%;
overflow: hidden;
}
.slime-btm-line {
width: 112px;
position: absolute;
left: 50%;
margin-left: -56px;
bottom: 0;
height: 1px;
background-color: #202c44;
}
.slime-light-1 {
position: absolute;
background-color: #5189fe;
right: 9px;
top: 1px;
border-radius: 50%;
width: 135px;
height: 97px;
}
.slime-light-2 {
position: absolute;
background-color: #5697fe;
right: 6px;
top: 8px;
border-radius: 50%;
width: 98px;
height: 60px;
}
.slime-light-3 {
position: absolute;
background-color: #5ca6fe;
right: 6px;
top: 8px;
border-radius: 50%;
width: 55px;
height: 33px;
}