1 <!doctype html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>机器猫</title>
7 <style>
8 .heard {
9 width: 400px;
10 height: 400px;
11 background: linear-gradient(to left bottom, #C9F5FC 0%, #09BEED, #222 130%);
12 border: 1px solid #277E89;
13 position: relative;
14 left: 500px;
15 border-radius: 48%;
16
17 }
18
19 .face {
20 width: 350px;
21 height: 300px;
22 background: #fff;
23 box-shadow: 0 0 5px #ddd inset;
24 border: 2px solid #14819A;
25 left: 25px;
26 top: 80px;
27 position: absolute;
28 border-radius: 50%;
29
30 }
31
32 .eyes {
33 width: 90px;
34 height: 120px;
35 border: 2px solid #555;
36 background: #fff;
37 top: 40px;
38 left: 110px;
39 position: absolute;
40 z-index: 99;
41
42 border-radius: 45%;
43 transform: rotate(-3deg);
44 }
45
46 .eyes2 {
47 width: 90px;
48 height: 120px;
49 border: 2px solid #555;
50 top: 40px;
51 left: 202px;
52 position: absolute;
53 z-index: 99;
54
55 background: #fff;
56 border-radius: 45%;
57 transform: rotate(3deg);
58 }
59
60 .bizi {
61 width: 40px;
62 height: 40px;
63 /*background:#C84105;*/
64 position: absolute;
65 top: 144px;
66 left: 182px;
67 z-index: 99;
68 background-image: radial-gradient(15px 15px, #fff 1%, #C84105 65%);
69 background-position: -32px -86px;
70
71 border: 2px solid #5D1400;
72 border-radius: 50%;
73 }
74
75 .eyes_inner {
76 width: 20px;
77 height: 20px;
78 background: #555;
79 z-index: 99;
80
81 border-radius: 50%;
82 position: absolute;
83 right: 20px;
84 bottom: 22px;
85
86 }
87
88 .eyes_inner2 {
89 width: 20px;
90 height: 20px;
91 background: #555;
92 z-index: 99;
93
94 border-radius: 50%;
95 position: absolute;
96 z-index: 99;
97 left: 20px;
98 bottom: 22px;
99 }
100
101 .zuibazhezhao {
102 width: 260px;
103 height: 100px;
104 background: #fff;
105 z-index: 2;
106 margin-top: 80px;
107 position: absolute;
108 left: 40px;
109 top: -90;
110
111 }
112
113 .bizixia {
114 border-right: 2px solid #555;
115 position: absolute;
116 z-index: 99;
117
118 left: 175px;
119 top: 70px;
120 height: 160px;
121
122 }
123
124 .zuiba {
125 position: absolute;
126 bottom: 70px;
127 left: 50px;
128 border-radius: 50%;
129 width: 250px;
130 height: 220px;
131 border-bottom: 2px solid #555;
132 }
133
134 .xiangquan {
135 position: absolute;
136 height: 20px;
137 width: 300px;
138 border-radius: 10px;
139 bottom: 16px;
140 left: 24px;
141 border: 1px solid #310100;
142 background: #CC400E;
143 box-shadow: 0 -8px 8px #8A2810 inset;
144 z-index: 99;
145 }
146
147 .lingdang {
148 width: 50px;
149 height: 50px;
150 border: 2px solid #9DA12B;
151 background: #FDFF76;
152 position: absolute;
153 border-radius: 50%;
154 overflow: hidden;
155 z-index: 99;
156 box-shadow: 0 0 2px #CBCBCB;
157
158 left: 123px;
159 top: 6px;
160 }
161
162 .lingdang .shadow {
163 height: 14px;
164 width: 50px;
165 position: absolute;
166 z-index: 99;
167 border-radius: 80%;
168 left: 0;
169 top: 0;
170 box-shadow: 0 0 8px #98A022;
171 }
172
173 .kongxin {
174 height: 12px;
175 width: 12px;
176 position: absolute;
177 border-radius: 50%;
178 z-index: 99;
179 box-shadow: -2 -2 2px #000;
180 left: 18px;
181 top: 24px;
182 background: #444;
183 }
184
185 .lingxia {
186 border-left: 2px solid #444;
187 height: 15px;
188 z-index: 99;
189 box-shadow: -2 -2 2px #000;
190 position: absolute;
191 bottom: 0;
192 left: 23px;
193 }
194
195 .shenti {
196 width: 300px;
197 height: 230px;
198 background: linear-gradient(to left bottom, #C9F5FC 0%, #09BEED, #222 130%);
199 position: relative;
200 overflow: hidden;
201 border: 2px solid #555;
202 border-radius: 26px 30px 11px 11px;
203 border-bottom: 0;
204
205 left: 52px;
206 top: 355px;
207 }
208
209 .shenti2 {
210 width: 300px;
211 height: 230px;
212 background: linear-gradient(to left bottom, #09BEED 20%, #222 200%);
213 position: absolute;
214 border-radius: 26px 30px 0 0;
215 z-index: 2;
216 box-shadow: 5px -5px 5px left:0px;
217 top: 0px;
218 }
219
220 .duzi {
221 width: 220px;
222 height: 220px;
223 background: #fff;
224 border: 2px solid #555;
225 position: absolute;
226 z-index: 2;
227 box-shadow: 0 0 10px #ccc inset;
228
229 top: -30px;
230 left: 40px;
231 border-radius: 50%;
232 }
233
234 .koudai {
235 width: 170px;
236 height: 170px;
237 border-radius: 50%;
238 position: absolute;
239 border: 2px solid #666;
240 top: 85px;
241 }
242
243 .mengban {
244 width: 174px;
245 height: 172px;
246 position: absolute;
247 border-bottom: 2px solid #666;
248 left: 25px;
249 top: -65px;
250 }
251
252 .zhezhao {
253 width: 174px;
254 height: 70px;
255 position: absolute;
256 background: #fff;
257 top: 15px;
258 left: -2px;
259 border-radius: 20px 20px 0 0;
260 }
261
262 .gebo {
263 width: 160px;
264 height: 80px;
265 position: absolute;
266 left: -44px;
267 top: 376px;
268 border-bottom: 2px solid #277E89;
269 border-top: 2px solid #277E89;
270 transform: rotate(-20deg);
271
272 background: #0F96B8;
273 }
274
275 .gebo2 {
276 width: 160px;
277 height: 80px;
278 position: absolute;
279 left: 292px;
280 top: 376px;
281 border-bottom: 2px solid #277E89;
282 border-top: 2px solid #277E89;
283 transform: rotate(20deg);
284
285 background: #09BEED;
286 }
287
288 .shou {
289 width: 100px;
290 height: 100px;
291 border-radius: 50%;
292 border: 2px solid #555;
293 background: #fff;
294 margin-top: -12px;
295 margin-left: -50px;
296 }
297
298 .shou2 {
299 width: 100px;
300 height: 100px;
301 border-radius: 50%;
302 border: 2px solid #555;
303 background: #fff;
304 margin-top: -12px;
305 margin-left: 100px;
306 }
307
308 .tuifenkai {
309 width: 26px;
310 height: 40px;
311 position: absolute;
312 z-index: 33;
313 background: #fff;
314 top: 212px;
315 left: 138px;
316 border-top: 2px solid #555;
317 border-left: 2px solid #555;
318 border-right: 2px solid #555;
319 border-radius: 50%;
320 }
321
322 .jiao {
323 width: 170px;
324 height: 40px;
325 border-radius: 26px 18px 18px 15px;
326 border: 2px solid #555;
327 background: #fff;
328 position: relative;
329 left: 529px;
330 top: 180px;
331 z-index: 99;
332 }
333
334 .jiao2 {
335 width: 170px;
336 height: 40px;
337 border-radius: 18px 26px 15px 18px;
338 border: 2px solid #555;
339 background: #fff;
340 position: absolute;
341 left: 180px;
342 top: -2px;
343 z-index: 99;
344 }
345
346 .huzizhezhao {
347 width: 120px;
348 height: 120px;
349 background: #fff;
350 position: absolute;
351 left: 120px;
352 top: 70px;
353 z-index: 98;
354
355 }
356
357 .huzi1 {
358 width: 274px;
359 height: 1px;
360 border-bottom: 2px solid #777;
361 z-index: 20;
362 top: 130px;
363 left: 40px;
364 position: absolute;
365 }
366
367 .huzi2 {
368 width: 274px;
369 height: 1px;
370 border-bottom: 2px solid #777;
371 z-index: 20;
372 transform: rotate(15deg);
373 top: 130px;
374 left: 40px;
375 position: absolute;
376 }
377
378 .huzi3 {
379 width: 274px;
380 height: 1px;
381 border-bottom: 2px solid #777;
382 z-index: 20;
383 transform: rotate(-15deg);
384 top: 130px;
385 left: 40px;
386 position: absolute;
387 }
388 </style>
389 </head>
390
391 <body>
392 <div class="heard">
393 <div class="face">
394 <div class="huzizhezhao"></div>
395 <div class="huzi1"></div>
396 <div class="huzi2"></div>
397 <div class="huzi3"></div>
398 <div class="zuibazhezhao"></div>
399 <div class="bizixia"></div>
400 <div class="zuiba"></div>
401 <div class="xiangquan">
402 <div class="lingdang">
403 <div class="shadow"></div>
404 <div class="kongxin"></div>
405 <div class="lingxia"></div>
406 </div>
407 </div>
408 </div>
409 <div class="eyes">
410 <div class="eyes_inner"></div>
411 </div>
412 <div class="eyes2">
413 <div class="eyes_inner2"></div>
414 </div>
415 <div class="bizi"></div>
416
417 <div class="shenti">
418 <div class="shenti2"></div>
419 <div class="duzi">
420 <div class="mengban">
421 <div class="koudai">
422 <div class="zhezhao"></div>
423 </div>
424 </div>
425
426 </div>
427
428 <div class="tuifenkai">
429
430 </div>
431 </div>
432 <div class="gebo">
433 <div class="shou"></div>
434 </div>
435 <div class="gebo2">
436 <div class="shou2"></div>
437 </div>
438
439 </div>
440 <div class="jiao">
441 <div class="jiao2"></div>
442 </div>
443
444 </body>
445
446 </html>
