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

概述接着之前的[css]我要用css画幅画(七) - 哆啦A梦，这次画的是Hello Kitty。 /* 开始前先说点废话，一转眼就2016年了，过完年后一直没更新博客，无他，就是懒得动。这一转眼，一

接着之前的[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

@H_295_419@

 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 }