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

接着之前的[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     position: relative;
12 }
13 
14 .pull-left {
15     float: left;
16 }
17 
18 .pull-right {
19     float: right;
20 }
21 
22 .m-hoz-auto {
23     margin-left: auto;
24     margin-right: auto;
25 }
26 
27 .left-32 {
28     left: 32px;
29 }
30 
31 .left-5 {
32     left: 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     background-color: black;
52 }
53 
54 .bacc-blue {
55     background-color: rgb(2, 159, 227);
56 }
57 
58 .bacc-brown-red {
59     background-color: rgb(216, 5, 23);
60 }
61 
62 .bacc-mouse-red {
63     background-color: #E80115;
64 }
65 
66 .bacc-mouse-orange {
67     background-color: #EF6C1C;
68 }
69 
70 .bacc-bell-yellow {
71     background-color: #F5D600;
72 }
73 
74 .border-black-1 {
75     border: 1px solid black;
76 }
77 
78 .border-black-2 {
79     border: 2px solid black;
80 }
81 
82 .border-black-3 {
83     border: 3px solid black;
84 }
85 
86 .oh {
87     overflow: hidden;
88 }
common.css

 

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

 

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

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

1 <div class="pos-r">
2             <div class="body-left pos-r pull-left"></div>
3             <div class="body-right pos-r pull-left"></div>
4         </div>
html
 1 .body-left {
 2     background-color: #000;
 3     border: 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     margin-left: 125px;
10     margin-top: -43px;
11     width: 135px;
12     z-index: 3;
13 }
14 
15 .body-right {
16     background-color: #000;
17     border: 12px solid #000;
18     border-top-right-radius:  100% 90%;
19     border-bottom-left-radius: 60% 20%;
20     border-bottom-right-radius: 70% 50%;
21 
22     height: 240px;
23     margin-left: -46px;
24     margin-top: -43px;
25     width: 135px;
26     z-index: 3;
27 }
css

 

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

1 <div class="pos-r">
2             <div class="shirt-left pos-r pull-left">
3             </div>
4             <div class="shirt-right pos-r pull-left">
5             </div>
6         </div>
html
 1 .shirt-left {
 2     background-color: rgb(250, 167, 209);
 3     border-top-left-radius: 100% 100%;
 4     border-bottom-left-radius: 70% 50%;
 5     border-bottom-right-radius: 60% 20%;
 6 
 7     height: 240px;
 8     margin-left: 140px;
 9     margin-top: -254px;
10     width: 135px;
11     z-index: 3;
12 }
13 
14 .shirt-right {
15     background-color: rgb(250, 167, 209);
16     border-top-right-radius:  115% 105%;
17     border-bottom-left-radius: 60% 20%;
18     border-bottom-right-radius: 70% 50%;
19 
20     height: 240px;
21     margin-left: 245px;
22     margin-top: -254px;
23     width: 135px;
24     z-index: 3;
25 }
css

 

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

1 <div class="neck pos-r"></div>
html
 1 .neck {
 2     background-color: rgb(245, 74, 153);
 3     border: 12px solid #000;
 4     border-radius: 50%;
 5 
 6     height: 110px;
 7     margin-left: 195px;
 8     margin-top: -72px;
 9     width: 100px;
10     z-index: 4;
11 }
css

 

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

1 <div class="shirt-right pos-r pull-left">
2                 <div class="feet-left pos-a pull-left"></div>
3                 <div class="feet-right pos-a pull-left"></div>
4             </div>
html
 1 .feet-left {
 2     background-color: white;
 3     border: 12px solid #000;
 4     border-bottom-left-radius: 60% 100%;
 5     border-bottom-right-radius: 30% 50%;
 6 
 7     height: 60px;
 8     margin-left: -118px;
 9     margin-top: 170px;
10     width: 115px;
11     z-index: 4;
12 }
13 
14 .feet-right {
15     background-color: white;
16     border: 12px solid #000;
17     border-bottom-left-radius: 30% 50%;
18     border-bottom-right-radius: 60% 100%;
19 
20     height: 60px;
21     margin-left: 10px;
22     margin-top: 170px;
23     width: 115px;
24     z-index: 4;
25 }
css

 

 

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

 

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

 

关键html:

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

关键css：

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

 

posted on 2016-04-10 10:42  bee0060  阅读(1382)  评论(0)  编辑  收藏  举报

导航