[css]我要用css画幅画(七) - 哆啦A梦

 1 <div class="doraemon">
 2             ="circle border-black-1 head" 3                 ="eyes" 4                     ="circle pos-a bacc-white eye eye-left" 5                         ="circle pos-r top-30 eye-pupil eye-pupil-left"></div 6                     </ 7                     ="circle pos-a bacc-white eye eye-right" 8                         ="circle pos-r top-30 eye-pupil eye-pupil-right" 9                     10                 11                 ="border-black-2 bacc-white face"12                     ="circle pos-r border-black-2 bacc-brown-red nose"13                         ="circle pos-a bacc-white nose-light"14                     15                     ="m-hoz-auto pos-r bacc-white bread-field"16 
17                     ="m-hoz-auto bacc-black nasal-groove"18                         ="pos-a bacc-black bread bread-left bread-left-1"19                         ="pos-a bacc-black bread bread-left bread-left-2"20                         ="pos-a bacc-black bread bread-left bread-left-3"21                         ="pos-a bacc-black bread bread-right bread-right-1"22                         ="pos-a bacc-black bread bread-right bread-right-2"23                         ="pos-a bacc-black bread bread-right bread-right-3"24                     25 
26                     
27                     ="pos-r m-hoz-auto lips"28                         ="pos-a bacc-white border-black-2 lips-left"29                         ="lips-center-left pull-left"30                             ="lips-center-left-inside circle border-black-2 bacc-white"31                         32                         ="lips-center pull-left bacc-white"33                             ="lips-center-inside pos-r m-hoz-auto border-black-2 bacc-mouse-red"34                         35                         ="lips-center-right pull-left"36                             ="lips-center-right-inside border-black-2 bacc-white">                            37                         38                         ="pos-a border-black-2 bacc-white lips-right"39                     40                     
41                     ="mouth border-black-2 m-hoz-auto bacc-mouse-red"42                         ="tongue pos-r m-hoz-auto bacc-mouse-red"43                             ="tongue-left pos-r pull-left"44                                 ="tongue-left-inside border-black-2 bacc-mouse-orange"45                             46                             ="tongue-right pos-r pull-left"47                                 ="tongue-right-inside border-black-2 bacc-mouse-orange"48                             49                         50                     51                 52             53         >

  1 div {
  2     /*border: 1px solid #000;*/
  3 }
  4 
  5 
  6 位置选择器  7 .pos-a {
  8     position: absolute;
  9 }
 10 
 11 .pos-r {
 12  relative;
 13 }
 14 
 15 .pull-left {
 16     float: left;
 17 }
 18 
 19 .pull-right {
 20  right;
 21 }
 22 
 23 .m-hoz-auto {
 24     margin-left: auto;
 25     margin-right: 26 }
 27 
 28 .left-32 {
 29     left: 32px;
 30 }
 31 
 32 .left-5 {
 33  5px;
 34 }
 35 
 36 .top-30 {
 37     top: 30px;
 38 }
 39 
 40 形状选择器 41 .circle {
 42     border-radius: 50%;
 43 }
 44 
 45 
 46 样式选择器 47 .bacc-white {
 48     background-color: white;
 49 }
 50 
 51 .bacc-black {
 52  black;
 53 }
 54 
 55 .bacc-brown-red {
 56  rgb(216,5,23);
 57 }
 58 
 59 .bacc-mouse-red {
 60  #E80115;
 61 }
 62 
 63 .bacc-mouse-orange {
 64  #EF6C1C;
 65 }
 66 
 67 .border-black-1 {
 68     border: 1px solid black;
 69 }
 70 
 71 .border-black-2 {
 72  2px solid black;
 73 }
 74 
 75 .border-black-3 {
 76  3px solid black;
 77 }
 78 
 79 卡通组件 80 .doraemon {
 81     height: 500px;
 82     width: 83 }
 84 
 85 .head {
 86  rgb(2,159,227);
 87  300px;
 88     margin: 0px auto;
 89     overflow: hidden;
 90  310px;
 91 }
 92 
 93 .eyes {
 94  80px;
 95  -5px auto 0;
 96     padding-top: 10px;
 97  120px;
 98 }
 99 
100 .eye {
101  2px solid #000;
102     box-sizing: border-box;
103 104  60px;
105 }
106 
107 .eye-left {
108 109  2px;
110 }
111 
112 .eye-right {
113 114  58px;
115 }
116 
117 .eye-pupil {
118 119  18px;
120 121 }
122 
123 .eye-pupil-left {
124      left:125 }
126 
127 .eye-pupil-right {
128 129 }
130 
131 .face {
132     border-top-left-radius: 45% 60%;
133     border-top-right-radius: 45% 60%;    
134     border-bottom-left-radius: 60% 85%;
135     border-bottom-right-radius:136  230px;
137  -30px auto;
138  270px;
139 
140     z-index: 5;
141 }
142 
143 .nose {
144  38px;
145  16px auto 0;
146 147 }
148 
149 .nose-light {
150 151     right:152  8px;
153 154 }
155 
156 .nasal-groove{
157  45px;
158 159  12;
160 }
161 
162 .bread-field {
163  44px;
164  240px;
165  10;
166 }
167 
168 .bread {
169 170 171 }
172 
173 .bread-left {
174 175     -webkit-transform-origin: right top;
176 }
177 
178 .bread-left-1 {
179     
180  -5px;
181     -webkit-transform: rotate(20deg);
182 }
183 
184 .bread-left-2 {
185 186  rotate(5deg);
187 }
188 
189 .bread-left-3 {
190  20px;
191  rotate(-15deg);
192 }
193 
194 .bread-right {
195 196  left top;
197 }
198 
199 .bread-right-1 {
200 201  rotate(-20deg);
202 }
203 
204 .bread-right-2 {
205 206  rotate(-5deg);
207 }
208 
209 .bread-right-3 {
210 211  rotate(15deg);
212 }
213 
214 .lips {
215 216  250px;
217 }
218 
219 .lips-center {    
220  75px;
221 222  145px;
223 }
224 
225 .lips-center-inside {
226  65%;
227 228     border-style: none;
229     border-top-style: solid;
230 
231 232  -50px;
233 234 }
235 
236 .lips-center-left {    
237  40px;
238 239 240 241 }
242 
243 .lips-center-left-inside {
244  50% 50%;
245 246     border-top:none;
247     border-left:248     border-right:249     content: " ";
250     display: block;
251 252  -30px;
253     margin-top: -36px;
254  100px;
255 }
256 
257 .lips-center-right {
258 259 260 261 }
262 
263 .lips-center-right-inside {
264 265 266 267 268 269 270 271 272  -34px;
273  -37px;
274 275 }
276 
277 .lips-left {
278  60% 50%;
279  0%;
280  75% 50%;
281 282 283 284  -22px;
285  -59px;
286 287 
288  rotate(15deg) ;
289 }
290 
291 .lips-right {
292  55% 50%;
293 294  80% 50%;
295 296 297 298 299 300 301 
302  rotate(-9deg) ;
303 }
304 
305 .mouth {
306  50% 100%;
307 308 309  150px;
310 -50px;
311 312 }
313 
314 .tongue {
315 316 317 318  65px;
319 320 321  170px;
322 }
323 
324 .tongue-left {
325 326 327  15px;
328 329 330  2;
331 }
332 
333 .tongue-left-inside {
334  50% 80%;
335  50% 80%;    
336     border-bottom:337 
338 339 340 341 
342  rotate(-45deg);
343 }
344 
345 .tongue-right {    
346 347  -67px;
348  83px;
349 350 351  3;
352 }
353 
354 .tongue-right-inside {
355 356 357 358 359  -11px;
360 361 362 363 
364  rotate(45deg);
365 }

="doraemon pull-left"="head pos-r m-hoz-auto circle border-black-1 bacc-blue"="eye-pupil eye-pupil-left circle pos-r top-30"="eye eye-right circle pos-a bacc-white"="eye-pupil eye-pupil-right circle pos-r top-30"="face border-black-2 bacc-white"="nose circle pos-r border-black-2 bacc-brown-red"="nose-light circle pos-a bacc-white"="bread-field m-hoz-auto pos-r bacc-white"="nasal-groove m-hoz-auto bacc-black"="bread bread-left bread-left-1 pos-a bacc-black"="bread bread-left bread-left-2 pos-a bacc-black"="bread bread-left bread-left-3 pos-a bacc-black"="bread bread-right bread-right-1 pos-a bacc-black"="bread bread-right bread-right-2 pos-a bacc-black"="bread bread-right bread-right-3 pos-a bacc-black"="lips pos-r m-hoz-auto"="lips-left pos-a bacc-white border-black-2"="lips-right pos-a border-black-2 bacc-white"="mouth m-hoz-auto border-black-2 bacc-mouse-red"53             
54             ="collar pos-r m-hoz-auto oh"55                 ="collor-border-top pos-a circle border-black-2"56                  ="collar-inside circle"57                  ="collor-border-bottom pos-a circle border-black-2"58             59             ="bell pos-r m-hoz-auto oh circle bacc-bell-yellow border-black-2"60                 ="bell-middle-curve bell-middle-curve-1 circle border-black-2"61                 ="bell-middle-curve bell-middle-curve-2 circle border-black-2"62                 ="bell-hole circle bacc-white border-black-2"63                 ="bell-gap m-hoz-auto border-black-1"64             65             ="body pos-r m-hoz-auto"66                 ="body-inside pos-r m-hoz-auto border-black-2 bacc-blue"67                 ="belly pos-r m-hoz-auto border-black-2 bacc-white"68                     ="bag pos-r m-hoz-auto oh"69                         ="bag-top pos-a border-black-2"70                         ="bag-bottom pos-r border-black-2"71                     72                 73                 ="left-hand pos-r"74                     ="left-arm pos-r border-black-2 bacc-blue"75                     ="left-palm pos-a    circle border-black-2 bacc-white"76                 77                 ="right-hand pos-r"78                     ="right-arm pos-r border-black-2 bacc-blue"79                     ="right-palm pos-a circle border-black-2 bacc-white"80                 81                 ="left-leg pos-r oh"82                     ="left-leg-inside pos-r border-black-2 bacc-blue"83                 84                 ="crotch pos-a m-hoz-auto oh"85                     ="crotch-inside border-black-2 bacc-white">                        
86                     87                 88                 ="right-leg pos-r oh"89                     ="right-leg-inside pos-r border-black-2 bacc-blue"90                 91 
92                 ="left-foot pos-a border-black-2 bacc-white"93                 ="right-foot pos-a border-black-2 bacc-white"94             95         >

.bacc-blue {
.bacc-bell-yellow {
 #F5D600;
 79  80  81 }
 82 
 83  84  85 }
 86 
 87 .oh {
 89 }
 90 
 91  92  93  95 }
 96 
 97 .head {    
 98  99 100 102 }
103 
104 105 106 107 109 }
110 
111 112 115 116 }
117 
118 125 126 }
127 
128 129 130 131 132 }
133 
134 136 }
137 
138 139 140 }
141 
142 143 147 148 149 150 
152 }
153 
154 155 156 158 }
159 
160 161 162 165 }
166 
167 168 176 177 }
178 
179 190     
192 193 }
194 
195 197 198 }
199 
200 202 203 }
204 
205 207 208 }
209 
210 212 213 }
214 
215 217 218 }
219 
220 228 }
229 
230 241 
242 243 245 }
246 
247 252 }
253 
254 255 256 257 261 262 263 266 }
267 
268 272 }
273 
274 275 276 277 286 }
288 289 290 291 298 
300 }
302 303 304 305 312 
313 314 }
315 
316 322 323 }
324 
325  35px;
331 332 333 334 }
335 
336 337 341 349 
352 354 355 }
356 
357 363 364 }
365 
366 367 368 369 370 371 372 373 374 375 
376 377 }
378 
379 .collar {
380 -40px;
381 382  220px;
383 384 }
385 
386 .collar-inside {    
387  20px solid rgb(216,1)">388  50px;
389 390  -19px;
391 392 }
393 
394 .collor-border-top {
395  55px;
396  -38px;
397  0px;
398 399 }
400 
401 .collor-border-bottom {
402  73px;
403  -75px;
404  -17px;
405 406 }
407 
408 .bell {
409  53px;
410  -15px;
411 412 413 }
414 
415 .bell-middle-curve {
416 417 418 }
419 
420 .bell-middle-curve-1 {
421  12px;
422 -27px;
423 }
424 
425 .bell-middle-curve-2 {
426  -48px;
427 428 }
429 
430 .bell-hole {
431 432  -46px;
433  21px;
434 435 }
436 
437 .bell-gap {
438  16px;
439  26px;
440 441 }
442 
443 .body {
444  162px;
445  -65px;
446  430px;
447  1;
448 }
449 
450 .body-inside {
451  15% 75%;
452  12% 75%;
453  15% 50%;
454  25% 50%;
455  180px;
456 457 458 459 }
460 
461 .belly {
462  37% 50%;
463 464 465 466  125px;
467  -165px;
468  175px;
469 470 }
471 
472 .bag {
473 474 475 476  146px;
477 }
478 
479 .bag-top {
480  40%;
481 482  -42px;
483  -20px;
484 485 }
486 
487 .bag-bottom {
488  50% 32%;
489 490  140px;
491  -83px;
492 493  142px;
494 }
495 
496 .left-hand {
497 498  -139px;
499  25px;
500 501  0;
502 }
503 
504 .left-arm {
505  45% 40%;
506  45% 30%;
507 508  33px;
509 510  95px;
511     
512  rotate(-30deg);
513  left bottom;
514 }
515 
516 .left-palm {
517 518 519 520 521 }
522 
523 .right-hand {
524 525  -115px;
526  225px;
527 528 529 }
530 
531 .right-arm {
532 533 534 535 536 537 538     
539  rotate(30deg);
540  right bottom;
541 }
542 
543 .right-palm {
544 545  -52px;
546 547 548 }
549 
550 .left-leg {
551  63px;
552 553  101px;
554 555 556 }
557 
558 .left-leg-inside {
559  35% 100%;
560  25% 55%;
561  100% 20%;
562 563 564  -16px;
565 566 }
567 
568 .crotch {
569 570 571  192px;
572 573 574 }
575 
576 .crotch-inside {
577  50% 60%;
578 579 580 581 582 }
583 
584 .right-leg {
585 586  -62px;
587  209px;
588 589 590 }
591 
592 .right-leg-inside {
593 594 595 596 597 598 599  -4px;
600 601 }
602 
603 .left-foot {
604  60% 60%;
605  50% 85%;
606  43% 75%;    
607  50% 55%;
608 609  -32px;
610  72px;
611  133px;
612 
613 614 }
615 
616 .right-foot {
617 618 619 620  43% 75%;
621 622 623  218px;
624 625 
626 627 }