[css]我要用css画幅画(八)

接着之前的[css]我要用css画幅画(七) - 哆啦A梦，这次画的是Hello Kitty。

/*
开始前先说点废话， 一转眼就2016年了，过完年后一直没更新博客，无他，就是懒得动。 这一转眼，一年就过了1/4多了。

现在依然处在迷茫状态，时间一直浪费下去也是白浪费，在找到新的目标前，暂时先继续之前做的事吧，免得时间过了又觉得可惜。

*/

一点个人牢骚，可忽略

这个hello kitty画下来，非常拖沓，慢慢调样式实在太沉闷了，而且感觉只是在重复自己，所以没啥动力继续。

这次的hello kitty比哆啦A梦简单很多，本身是可以很快就完成的。不过由于没啥动力，画的慢，而且也粗糙。

反正终于是完成了，先发出来，以后有动力再调整吧。

Github Demo：http://bee0060.github.io/Css-Paint/pages/carton/hello-kitty.html

Code Pen Demo: http://codepen.io/bee0060/pen/YqePNr

代码：https://github.com/bee0060/Css-Paint

这次要临摹的图片如下：

因为哆啦A梦的经验，这次已经感觉并不困难，而且发现哆啦A梦的CSS中有部分样式可以重用，于是我把这些样式抽出来做成公用样式，并引用进来，公用样式如下：

 1 位置选择器*/
 2 .clearfix {
 3     clear: both;
 4 }
 5 
 6 .pos-a {
 7     position: absolute;
 8 }
 9 
10 .pos-r {
11  relative;
12 }
13 
14 .pull-left {
15     float: left;
16 }
17 
18 .pull-right {
19  right;
20 }
21 
22 .m-hoz-auto {
23     margin-left: auto;
24     margin-right:25 }
26 
27 .left-32 {
28     left: 32px;
29 }
30 
31 .left-5 {
32  5px;
33 }
34 
35 .top-30 {
36     top: 30px;
37 }
38 
39 形状选择器40 .circle {
41     border-radius: 50%;
42 }
43 
44 
45 样式选择器46 .bacc-white {
47     background-color: white;
48 }
49 
50 .bacc-black {
51  black;
52 }
53 
54 .bacc-blue {
55  rgb(2,159,227);
56 }
57 
58 .bacc-brown-red {
59  rgb(216,5,23);
60 }
61 
62 .bacc-mouse-red {
63  #E80115;
64 }
65 
66 .bacc-mouse-orange {
67  #EF6C1C;
68 }
69 
70 .bacc-bell-yellow {
71  #F5D600;
72 }
73 
74 .border-black-1 {
75     border: 1px solid black;
76 }
77 
78 .border-black-2 {
79  2px solid black;
80 }
81 
82 .border-black-3 {
83  3px solid black;
84 }
85 
86 .oh {
87     overflow: hidden;
88 }

common.css

其中有小部分可重用，部分样式就不需要重新写了。之前颗粒化的写样式，为这次的画带来了一点便利。但我也感觉到，要让css的重用率更高，还需要更多思考和实践，目前的效果还不算好。

这次画的策略主要是用颜色的遮盖，例如身体，实现步骤如下：

1. 先画一个纯黑的身体形状

1 <div class="pos-r">
2             ="body-left pos-r pull-left"></div3             ="body-right pos-r pull-left"4         </>

html

 1 .body-left {
 2  #000;
 12px solid #000;
 4     border-top-left-radius: 90% 100%;
 5     border-bottom-left-radius: 70% 50%;
 6     border-bottom-right-radius: 60% 20%;
 7 
 8     height: 240px;
 9  125px;
10     margin-top: -43px;
    width: 135px;
12     z-index: 3;
13 }
14 
15 .body-right {
16 17 18     border-top-right-radius:  100% 90%;
20 22  -46px;
25 26 27 }

css

2. 画粉红色的T恤盖上去

="shirt-left pos-r pull-left"4             ="shirt-right pos-r pull-left"5             6         >

html

.shirt-left {
 rgb(250,167,209);
 100% 100%;
 6 
 140px;
 -254px;
.shirt-right {
  115% 105%;
19 
21  245px;
25 }

css

3. 画桃红色的领口盖上去

="neck pos-r">

html

.neck {
 rgb(245,74,153);
 110px;
 195px;
 -72px;
 100px;
 4;
11 }

css

4. 画白色的双脚盖上去(为了遮盖，放在了右边T恤的div里）

2                 ="feet-left pos-a pull-left"3                 ="feet-right pos-a pull-left">

html

.feet-left {
 60% 100%;
 30% 50%;
 60px;
 -118px;
 170px;
 115px;
.feet-right {
 10px;
25 }

css

命名也遵照之前的规则，每个组件的命名都尽量可读。

这次画出来的比较粗糙，和原图的区别还是比较明显的，希望不会恶心到观众。哈哈。

关键html:

="container pos-r pull-left" 2         ="ear-left pos-a pull-left" 3         ="ear-right pos-a pull-left" 4         ="flower pos-a" 5             ="leaf leaf-1 pos-a" 6             ="leaf leaf-2 pos-a" 7             ="leaf leaf-3 pos-a" 8             ="leaf leaf-4 pos-a" 9             ="leaf leaf-5 pos-a"10             ="flower-center pos-a"11                 ="flower-heart"12             13         14         ="head pos-r"15             ="eye eye-left pos-a"16             ="eye eye-right pos-a"17             ="nose pos-r"18             ="bread-left-1 pos-a oh"19                 ="bread-left-1-inside"20             21             ="bread-left-2 pos-a oh"22                 ="bread-left-2-inside"23             24             ="bread-left-3 pos-a oh"25                 ="bread-left-3-inside"26             27             ="bread-right-1 pos-a oh"28                 ="bread-right-1-inside"29             30             ="bread-right-2 pos-a oh"31                 ="bread-right-2-inside"32             33             ="bread-right-3 pos-a oh"34                 ="bread-right-3-inside"35             36         37         38             39             40         41         42         43             44             45             46                 47                 48             49         50         ="left-hand pos-a"51             ="left-arm-shirt"52             ="left-finger"53                 ="left-finger-inside"54             55         56         ="right-hand pos-a"57             ="right-arm-shirt"58             ="right-finger"59                 ="right-finger-inside"60             61         62     >

View Code

关键css：

  1 卡通组件  2 .container {
  3  700px;
  4  600px;
  5 }
  6 
  7 .ear-left {
  8 15px solid #000;
  9  30%;
 10  100%;
 11  90%;
 12  130px;
 13  42px;
 14  80px;
 15  16 
 17  18     -webkit-transform: rotate(5deg);
 19     -webkit-transform-origin: left top;
 20 }
 21 
 22 .ear-right {
 23  24  80% 65%    ;
 25  15%;
 26  25% 95%;
 27  28  29  255px;
 30  31 
 32  33  rotate(-10deg);
 34  right top;
 35 }
 36 
 37 .flower {
 38  -8px;
 39  230px;
 40 }
 41 
 42 .leaf {
 43  44  45  40px 45px;
 46  47  40px;
 48 
 49     border-bottom-color: 50  6;
 51 }
 52 
 53 .leaf-1 {
 54  55px;
 55  9px;
 56  17px;
 57  rotate(-30deg);
 58 }
 59 
 60 .leaf-2 {
 61  50px;
 62  84px;
 63  64  rotate(50deg);
 65 }
 66 
 67 .leaf-3 {
 68  45px;
 69  89px;
 70  98px;
 71  rotate(120deg);
 72 }
 73 
 74 .leaf-4 {
 75  76  77  78  rotate(190deg);
 79 }
 80 
 81 .leaf-5 {
 82  50px;    
 83  -18px;
 84  78px;
 85  86  rotate(-105deg);
 87 }
 88 
 89 .flower-center {
 90  91  92  82px;
 93  64px;
 94  21px;
 95  95px;
 96  97 }
 98 
 99 .flower-heart {
100 101  9px solid #000;
102 103  23px;
104     margin: 20px 25px;
105 106 }
107 
108 .head{
109  #fff;
110  15px solid #000;
111  50% 60%;
112 113  51% 48%;
114 115 
116  260px;
117 118 119  355px;
120 
121  5;
122 }
123 
124 .eye {
125 126 127 128 129 }
130 
131 .eye-left {
132 133  70px;
134 }
135 
136 .eye-right {
137 138  250px;
139 }
140 
141 .nose {
142 143  8px solid #000;
144 145  18px;
146  -20px;
147  165px;
148 149 150 151 }
152 
153 .bread-left-1 {
154  0px solid #fff;
155 156  -75px;
157 -70px;
158  15px;
159 160 
161 162 163 }
164 
165 .bread-left-1-inside {
166 167 168 169 170  205px;
171 }
172 
173 .bread-left-2 {
174 175 176 177 -60px;
178 179  77px;
180 
181  rotate(-5deg);
182 183 }
184 
185 .bread-left-2-inside {
186 187 188 189 190 191 }
192 
193 
194 .bread-left-3 {
195 196 197  -15px;
198 -50px;
199 200 201 
202  rotate(-19deg);
203 204 }
205 
206 .bread-left-3-inside {
207 208 209 210 211 212 }
213 
214 .bread-right-1 {
215 216 217  -80px;
218 325px;
219 220 221 
222 223 224 }
225 
226 .bread-right-1-inside {
227 228 229 230 231 232 }
233 
234 .bread-right-2 {
235 236 237  -48px;
238 332px;
239 240  72px;
241 
242  rotate(4deg);
243 244 }
245 
246 .bread-right-2-inside {
247 248 249 250 251 252 }
253 
254 
255 .bread-right-3 {
256 257 258  -14px;
259 260 261 262 
263  rotate(19deg);
264 265 }
266 
267 .bread-right-3-inside {
268 269 270 271 272 273 }
274 
275 276 277 278 279 280 281 
282 283 284 285 286 287 }
288 
289 290 291 292 293 294 295 
296 297 298 299 300 301 }
302 
303 304 305 306 307 
308 309 310 311 312 313 }
314 
315 316 317 318 319 320 
321 322 323 324 325 326 }
327 
328 329 330 331 332 333 
334 335 336 337 338 339 }
340 
341 342 343 344 345 346 
347 348 349 350 351 352 }
353 
354 355 356 357 358 359 
360 361 362 363 364 365 }
366 
367 .left-hand {
368 369 370 
371 372 
373 374 375  -30px;
376 377  2;
378 
379 380 381 }
382 
383 .left-arm-shirt{
384 385 386 387  0%;
388  100% 60%;
389 
390 391  57px;
392  -7px;
393 394 395 }
396 
397 .left-finger {
398 399  -2px;
400  -103px;
401 402 403 
404  rotate(-18deg);
405 406 }
407 
408 .left-finger-inside {
409 410 411 412 413  6px;
414  25px;
415 416 }
417 
418 .right-hand {
419 420 421 
422 423 
424 425  320px;
426  -37px;
427 428 429 
430  rotate(28deg);
431 432 }
433 
434 .right-arm-shirt{
435 436 437 438 439 440 
441 442 443 444 445 446 }
447 
448 .right-finger {
449 450 451 452 453 454 
455  rotate(18deg);
456 457 }
458 
459 .right-finger-inside {
460 461 462 463 464 465 466 467 }

View Code

Github Demo：http://bee0060.github.io/Css-Paint/pages/carton/hello-kitty.html

CodePen Demo: http://codepen.io/bee0060/pen/YqePNr

代码：https://github.com/bee0060/Css-Paint

有任何问题或意见，欢迎交流。

如果发现本文有什么问题（如错别字），请不吝告知，谢谢。

这次的博客可能有点滥竽充数，请见谅。希望短期内能想到其他有意思的东西来打发时间。：）

转载请注明出处：[css]我要用css画幅画(八) - Hello Kitty

[css]我要用css画幅画(八) - Hello Kitty

相关文章