JSDM

HTML

 
1
<div id="wrap">
2
  <div id="body"></div>
3
  <div id="head">
4
    <div id="hair1"></div>
5
    <div id="hair2"></div>
6
    <div id="glasses">
7
      <div id="frame1"></div>
8
      <div id="frame2"></div>
9
      <div id="bridge"></div>
10
    </div>
11
    <div id="lbrow"></div>
12
    <div id="rbrow"></div>
13
    <div id="leye"></div>
14
    <div id="reye"></div>
15
    <div id="lpupil"></div>
16
    <div id="rpupil"></div>
17
    <div id="lear"></div>
18
    <div id="rear"></div>
19
    <div id="nosebridge"></div>
20
    <div id="nose"></div>
21
    <div id="lstache"></div>
22
    <div id="rstache"></div>
23
    <div id="lburn"></div>
24
    <div id="rburn"></div>
25
    <div id="beard1"></div>
26
    <div id="beard2"></div>
27
    <div id="beard3"></div>
28
  </div>
29
</div>
!

CSS

x
 
1
@green: green;
2
@black: #090806;
3
@brown: #6A4E42;
4
@skin: #DEAB7F;
5
6
@eyeglasscolor: @green;
7
@haircolor: @black;
8
@eyecolor: @brown;
9
@skintone: @skin;
10
11
html {
12
  background: darkgray;
13
}
14
15
#frame1 {
16
  position: absolute;
17
  top: 175px;
18
  left: 15px;
19
  height: 45px;
20
  width: 70px;
21
  border: 7px solid @eyeglasscolor;
22
  border-bottom-left-radius: 35px;
23
  border-bottom-right-radius: 35px;
24
  z-index: 3;
25
}
26
27
#frame2 {
28
  position: absolute;
29
  top: 175px;
30
  right: 15px;
31
  height: 45px;
32
  width: 70px;
33
  border: 7px solid @eyeglasscolor;
34
  border-bottom-left-radius: 35px;
35
  border-bottom-right-radius: 35px;
36
  z-index: 3;
37
}
38
39
#bridge {
40
  position: absolute;
41
  top: 175px;
42
  left: 95px;
43
  height: 50px;
44
  width: 50px;
45
  border-top: 12px solid @eyeglasscolor;
46
  border-top-left-radius: 100px;
47
  border-top-right-radius: 100px;
48
  z-index: 2;
49
}
50
51
#head {
52
  position: absolute;
53
  left: 50%;
54
  top: 50%;
55
  margin: -180px -120px;
56
  background: @skintone;
57
  width: 240px;
58
  height: 380px;
59
  border-radius: 100px;
60
  border-top-left-radius: 50px;
61
  box-shadow: inset 0px 0px 0px 12px @haircolor;
62
}
63
64
#hair1 {
65
  position: absolute;
66
  background-color: @haircolor;
67
  height: 130px;
68
  width: 180px;
69
  right: -5px;
70
  top: -20px;
71
  border-top-left-radius: 150%;
72
  border-top-right-radius: 400%;
73
  border-bottom-left-radius: 400%;
74
  z-index: 1;
75
}
76
77
#hair2 {
78
  position: absolute;
79
  background-color: @haircolor;
80
  height: 120px;
81
  width: 200px;
82
  left: 9px;
83
  top: -30px;
84
  border-radius: 200%;
85
}
86
87
#nose {
88
  position: absolute;
89
  border-bottom: 90px solid darken(@skintone, 8%);
90
  border-left: 10px solid transparent;
91
  border-right: 10px solid transparent;
92
  width: 20px;
93
  left: 100px;
94
  top: 160px;
95
}
96
97
#lear {
98
  position: absolute;
99
  background-color: @skintone;
100
  width: 30px;
101
  height: 90px;
102
  top: 160px;
103
  left: -20px;
104
  border-top-left-radius: 50%;
105
  border-top-right-radius: 70%;
106
  border-bottom-left-radius: 80%;
107
  z-index: -3;
108
}
109
110
#rear {
111
  position: absolute;
112
  background-color: @skintone;
113
  width: 30px;
114
  height: 90px;
115
  top: 160px;
116
  right: -20px;
117
  border-top-left-radius: 70%;
118
  border-top-right-radius: 50%;
119
  border-bottom-right-radius: 80%;
120
  z-index: -3;
121
}
122
123
#lbrow {
124
  position: absolute;
125
  background-color: @haircolor;
126
  width: 70px;
127
  height: 20px;
128
  top: 155px;
129
  left: 20px;
130
  z-index: 2;
131
}
132
133
#rbrow {
134
  position: absolute;
135
  background-color: @haircolor;
136
  width: 70px;
137
  height: 20px;
138
  top: 155px;
139
  right: 20px;
140
  z-index: 2;
141
}
142
143
#leye {
144
  position: absolute;
145
  background-color: white;
146
  width: 50px;
147
  height: 40px;
148
  top: 165px;
149
  left: 30px;
150
  border-radius: 100px/50px;
151
  box-shadow: 0px 3px 0px 2px grey;
152
}
153
154
#reye {
155
  position: absolute;
156
  background-color: white;
157
  width: 50px;
158
  height: 40px;
159
  top: 165px;
160
  right: 30px;
161
  border-radius: 100px/50px;
162
  box-shadow: 0px 3px 0px 2px grey;
163
}
164
165
#lpupil {
166
  position: absolute;
167
  background-color: @eyecolor;
168
  width: 25px;
169
  height: 25px;
170
  top: 170px;
171
  left: 45px;
172
  border-radius: 100%;
173
}
174
175
#rpupil {
176
  position: absolute;
177
  background-color: @eyecolor;
178
  width: 25px;
179
  height: 25px;
180
  top: 170px;
181
  right: 45px;
182
  border-radius: 100%;
183
}
184
185
#lburn {
186
  position: absolute;
187
  background-color: @haircolor;
188
  bottom: 50px;
189
  left: 5px;
190
  width: 45px;
191
  height: 100px;
192
  border-top-right-radius: 70px;
193
  border-bottom-left-radius: 60px;
194
}
195
196
#rburn {
197
  position: absolute;
198
  background-color: @haircolor;
199
  bottom: 50px;
200
  right: 5px;
201
  width: 45px;
202
  height: 100px;
203
  border-top-left-radius: 70px;
204
  border-bottom-right-radius: 60px;
205
}
206
207
#lstache {
208
  position: absolute;
209
  background-color: @haircolor;
210
  bottom: 80px;
211
  left: 59px;
212
  width: 60px;
213
  height: 30px;
214
  border-top-left-radius: 200px;
215
  border-bottom-right-radius: 200px;
216
}
217
218
#rstache {
219
  position: absolute;
220
  background-color: @haircolor;
221
  bottom: 80px;
222
  right: 59px;
223
  width: 60px;
224
  height: 30px;
225
  border-top-right-radius: 200px;
226
  border-bottom-left-radius: 200px;
227
}
228
229
#beard1 {
230
  position: absolute;
231
  background-color: @haircolor;
232
  bottom: 10px;
233
  left: 20px;
234
  width: 200px;
235
  height: 50px;
236
  border-bottom-left-radius: 200px;
237
  border-bottom-right-radius: 200px;
238
}
239
240
#beard2 {
241
  position: absolute;
242
  background-color: @skintone;
243
  bottom: 40px;
244
  left: 50px;
245
  width: 140px;
246
  height: 40px;
247
  border-bottom-left-radius: 100%;
248
  border-bottom-right-radius: 100%; 
249
}
250
251
#beard3 {
252
  position: absolute;
253
  bottom: 50px;
254
  left: 100px;
255
  border-left: 20px solid transparent;
256
  border-right: 20px solid transparent;
257
  border-top: 20px solid @haircolor;
258
  border-radius: 100%;
259
}
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................