[css]我要用css畫幅畫(七) - 哆啦A夢

本文轉載自查看原文 2015-12-24 17:38 2170 doraemon/ html&css/ 畫圖/ css3

接着之前的[css]我要用css畫幅畫(六)，今天畫的有所不同，畫的是哆啦A夢，我們小時候對他的稱呼其實是小叮當機器貓。

（PS:這次我要做的事情，很多人已經做過，這並不是什么創新，我只是在學習並記錄下學習的過程）

這次就不多說CSS屬性的基礎概念了。說說我畫的過程吧，好，進入正題。

因為和之前的瞎畫不同，這次是畫現有的東西。我認為臨摹是比較簡單的。我先上網找了下要臨摹的對象，找了個最中規中矩的圖片，如下：

這對我來說不是一個簡單的任務，而我處理不簡單的任務的解決方案，就是把他拆分再拆分，一直拆到問題無法再拆且可以解決為止。

拆分結果如下：

1. 頭

　　1.1 眼睛

　　1.2 臉廓

　　1.3 鼻子

　　1.4 胡須

　　1.5 嘴唇

　　1.6 嘴巴

　　　　1.6.1 口腔

　　　　1.6.2 舌頭

2. 身子

　　2.1 項圈

　　2.2 鈴鐺

　　2.3 軀干

　　2.4 肚兜

　　2.5 百寶袋

　　2.6 雙手

　　　　2.6.1 手臂

　　　　2.6.2 拳頭

　　2.7 雙腳

　　　　2.7.1 腿

　　　　2.7.2 腳掌

這個畫我無法一次性完成，最新的效果可以在這里看到： Demo

代碼在這： https://github.com/bee0060/Css-Paint

（請根據關鍵字carton、doraemon找相應的文件）

之后我會陸續更新這幅畫，有些進展之后會記錄在該篇博客中。

-------------------------------------------------------------------------- 2015.12.24 start --------------------------------------------------------------------------

到目前為止，完成了小叮當的頭部。看了效果的會發現，下巴處看起來不對，沒關系，等我加上他的圍脖后，就能遮擋住這塊不對勁的地方了。

先上代碼：

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

head-html

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

common&head-css

codepen效果： https://codepen.io/bee0060/pen/gjpYLX

這個畫畫了快一個月，才把頭畫完，主要是因為懶，三天打魚兩天曬網，其次也在中途遇到幾個難點，差點因為這些難點放棄了。

其中最難的要數嘴唇和嘴唇兩邊的類似半圓形（我叫它們做“嘴唇左邊”和“嘴唇右邊”），其中需要曲線、半圓、傾斜、遮蓋來完成。其中最難處理的是曲線，解決了曲線問題后，就比較順利的完成了后續的畫。

嘴唇左邊: 這里用了一個半圓加上一定的傾斜實現。但實現之初，半圓會突出到胡子的區域，我就給胡子的容器設置白色背景色，將突出到胡子區域的嘴唇左邊部分遮蓋。

嘴唇：因為嘴唇是先向下凸，再向上，又向下的曲線，這里由3個圓角來拼接成這樣的曲線，這里做曲線的時間是最長的，遇到的問題和解決方案在下面細說。

嘴唇右邊：這里和嘴唇左邊采取相同的方法。只是圓角的角度不相同。

曲線: 我是用圓角來實現曲線的，相信很多人都是這么處理的。但是圓角有個問題，如果只有一面有邊框（例如left），且設置圓角，這個邊框會在末端慢慢變細，這會影響呈現效果。

　　　　我的解決方案是，增加一層容器，再給容器設置overflow:none, 然后真正擁有圓角邊框的對象在容器內，然后調整容器和圓角對象的大小，讓邊框變細的部分超出容器，以此隱藏掉變細的部分。

畫這幅畫的過程一點也不優雅，我無法通過數學的方式優雅的計算出每個對象的位置，每個圓角的弧度，每個傾斜的角度。我采用最低級的方法，在chrome中，選中元素並不斷調整各種css屬性，最終實現現在的效果。所以這么做非常低效。如果各位有什么好的工具或方法，請不吝賜教。在此先謝過。

到目前為止，只完成了頭部，之后（應該）會陸續完善直至完成。

謝謝觀看。另外，聖誕快樂。

-------------------------------------------------------------------------- 2015.12.24 end --------------------------------------------------------------------------

-------------------------------------------------------------------------- 2015.12.27 start --------------------------------------------------------------------------

今天的更新不說功能，只說一說這幅畫的CSS規范和策略。

本畫盡量遵照OOCSS的建議：http://www.w3cplus.com/css/oocss-concept

看了本畫代碼的同學可能會覺得很多html對象都用了一大串的class，但是細心的可能會發現有些類選擇器出現過多次。

我這么寫的目的是，在css的不同選擇器中，盡量減少同名且同值的css屬性代碼。

在html上，可以像組件一樣引用各種需要的選擇器來實現效果。

這樣可以讓css盡量短小，且不重復。雖然html對象的class屬性很長，但是可以像組件一樣更靈活的變換組合出需要的效果。

在本畫中，只使用類選擇器，即class選擇器。

類選擇器的種類主要分為4種：

1. 組件 - 用於描述哆啦A夢的各組成部分，如頭(.head)、臉(.face)、眼睛(.eyes)等，其中包含的css屬性為以下3種不包含的，其實就是那些不知道怎么放進以下三種選擇器中的css屬性。

2. 形狀 - 用於描述對象形狀的，如正圓形，暫時只有.circle類，其中只有一個屬性： border-radius: 50%;

3. 位置 - 這里不包括left、top等直接描述位置的，因為各組件的具體位置基本不可重用。這里描述的位置是：position、float，還有特殊的如margin縱向居中的類。

4. 樣式 - 如背景色類、邊框顏色類、邊框寬度類等。例如看原圖可以看出，這畫其實主要就那么3、4種顏色，所以我把顏色抽出來，就不需要在一大堆類中寫重復的顏色css了。

類選擇器的命名：

我用的編輯器是Sublime Text 2，有一個非常好用也很常用的組件是Emmet，Emmet其中一個功能是可以打很少的字符來輸入css，於是我的類選擇器，如果其中只設置一個屬性的話，一般就用這個屬性和值在Emmet中的簡寫來表示，還有些用屬性名的簡寫加上對應值的名稱，用橫杠鏈接來表示。如：

 1 /*
 2   左邊為Emmet 中的簡寫，右邊為表示的css屬性 
 3   pos ==> position
 4   bacc ==> background-color 
 5   於是我有如下類選擇器：
 6 */
 7 
 8 .pos-a {
 9     position: absolute;
10 }
11 
12 
13 .bacc-white {
14     background-color: white;
15 }

在html中使用選擇器時，也按照選擇器類別的順序：組件->形狀->位置->樣式，如下：

1 <div class="eye eye-left circle pos-a bacc-white"> 2 </div>

其中組件有可能有擴展和子組件的關系，就根據組件選擇器的輩份從前到后排列。

好了，我的html和css書寫規范說完了。下次更新應該至少會畫個圍脖（或叫項圈）吧。

謝謝觀看。

-------------------------------------------------------------------------- 2015.12.27 end --------------------------------------------------------------------------

-------------------------------------------------------------------------- 2016.01.04 end --------------------------------------------------------------------------

經過幾天斷斷續續的努力，終於把這個畫給完成了。掌握了基本技巧之后，要完成這幅畫的難度就降低很多了。最基本的技巧不外乎：

· 圓角

· 遮蓋

· overflow hidden

· 傾斜

這次更新完成的內容較多，包括如下：

1. 項圈 - 用一個較寬的橢圓實現，只顯示下半圓的大部分，用容器把不需要的超出部分隱藏。鈴鐺里的曲線也是用會超出容器的兩個上下並排的圓實現

2. 身體 - 用不規則的橢圓實現

3. 百寶袋 - 用兩個不規則橢圓實現上邊和下邊

4. 雙手 - 用橢圓和傾斜實現手臂，再用正圓的手掌遮蓋不需要的部分

5. 雙腳 - 用兩個不規則橢圓實現左右兩腿，用一個白底黑邊的橢圓實現褲襠（~。~），並遮蓋在兩腿之間，實現最終效果。用橢圓和傾斜實現雙腳。

大體上已經完成，細節還是看得出差異，不過我個人已經比較滿意這個效果了。之后可能只會花一點點時間去微調一下細節部分。

所以，這幅畫到此結束。謝謝觀看。

-------------------------------------------------------------------------- 2016.01.04 end --------------------------------------------------------------------------

完.....

最終效果： Demo

Code pen效果: http://codepen.io/bee0060/pen/rxjKxP

關鍵html：

 1 <div class="doraemon pull-left">
 2             <div class="head pos-r m-hoz-auto circle border-black-1 bacc-blue">
 3                 <div class="eyes">
 4                     <div class="eye eye-left circle pos-a bacc-white">
 5                         <div class="eye-pupil eye-pupil-left circle pos-r top-30"></div>
 6                     </div>
 7                     <div class="eye eye-right circle pos-a bacc-white">
 8                         <div class="eye-pupil eye-pupil-right circle pos-r top-30"></div>
 9                     </div>
10                 </div>
11                 <div class="face border-black-2 bacc-white">
12                     <div class="nose circle pos-r border-black-2 bacc-brown-red">
13                         <div class="nose-light circle pos-a bacc-white"></div>
14                     </div>
15                     <div class="bread-field m-hoz-auto pos-r bacc-white">
16 
17                     <div class="nasal-groove m-hoz-auto bacc-black"></div>
18                         <div class="bread bread-left bread-left-1 pos-a bacc-black"></div>
19                         <div class="bread bread-left bread-left-2 pos-a bacc-black"></div>
20                         <div class="bread bread-left bread-left-3 pos-a bacc-black"></div>
21                         <div class="bread bread-right bread-right-1 pos-a bacc-black"></div>
22                         <div class="bread bread-right bread-right-2 pos-a bacc-black"></div>
23                         <div class="bread bread-right bread-right-3 pos-a bacc-black"></div>
24                     </div>
25 
26                     
27                     <div class="lips pos-r m-hoz-auto">
28                         <div class="lips-left pos-a bacc-white border-black-2"></div>
29                         <div class="lips-center-left pull-left">
30                             <div class="lips-center-left-inside circle border-black-2 bacc-white"></div>
31                         </div>
32                         <div class="lips-center pull-left bacc-white">
33                             <div class="lips-center-inside pos-r m-hoz-auto border-black-2 bacc-mouse-red"></div>
34                         </div>
35                         <div class="lips-center-right pull-left">
36                             <div class="lips-center-right-inside border-black-2 bacc-white">                            </div>
37                         </div>
38                         <div class="lips-right pos-a border-black-2 bacc-white"></div>
39                     </div>
40                     
41                     <div class="mouth m-hoz-auto border-black-2 bacc-mouse-red">
42                         <div class="tongue pos-r m-hoz-auto bacc-mouse-red">
43                             <div class="tongue-left pos-r pull-left">
44                                 <div class="tongue-left-inside border-black-2 bacc-mouse-orange"></div>
45                             </div>
46                             <div class="tongue-right pos-r pull-left">
47                                 <div class="tongue-right-inside border-black-2 bacc-mouse-orange"></div>
48                             </div>
49                         </div>
50                     </div>
51                 </div>
52             </div>
53             
54             <div class="collar pos-r m-hoz-auto oh">
55                 <div class="collor-border-top pos-a circle border-black-2"></div>
56                  <div class="collar-inside circle"></div>
57                  <div class="collor-border-bottom pos-a circle border-black-2"></div>
58             </div>
59             <div class="bell pos-r m-hoz-auto oh circle bacc-bell-yellow border-black-2">
60                 <div class="bell-middle-curve bell-middle-curve-1 circle border-black-2"></div>
61                 <div class="bell-middle-curve bell-middle-curve-2 circle border-black-2"></div>
62                 <div class="bell-hole circle bacc-white border-black-2"></div>
63                 <div class="bell-gap m-hoz-auto border-black-1"></div>
64             </div>
65             <div class="body pos-r m-hoz-auto">
66                 <div class="body-inside pos-r m-hoz-auto border-black-2 bacc-blue"></div>
67                 <div class="belly pos-r m-hoz-auto border-black-2 bacc-white">
68                     <div class="bag pos-r m-hoz-auto oh">
69                         <div class="bag-top pos-a border-black-2"></div>
70                         <div class="bag-bottom pos-r border-black-2"></div>
71                     </div>
72                 </div>
73                 <div class="left-hand pos-r">
74                     <div class="left-arm pos-r border-black-2 bacc-blue"></div>
75                     <div class="left-palm pos-a    circle border-black-2 bacc-white"></div>
76                 </div>
77                 <div class="right-hand pos-r">
78                     <div class="right-arm pos-r border-black-2 bacc-blue"></div>
79                     <div class="right-palm pos-a circle border-black-2 bacc-white"></div>
80                 </div>
81                 <div class="left-leg pos-r oh">
82                     <div class="left-leg-inside pos-r border-black-2 bacc-blue"></div>
83                 </div>
84                 <div class="crotch pos-a m-hoz-auto oh">
85                     <div class="crotch-inside border-black-2 bacc-white">                        
86                     </div>
87                 </div>
88                 <div class="right-leg pos-r oh">
89                     <div class="right-leg-inside pos-r border-black-2 bacc-blue"></div>
90                 </div>
91 
92                 <div class="left-foot pos-a border-black-2 bacc-white"></div>
93                 <div class="right-foot pos-a border-black-2 bacc-white"></div>
94             </div>
95         </div>

View Code

完整css：

  1 div {
  2     /*border: 1px solid #000;*/
  3 }
  4 
  5 
  6 /*位置選擇器*/
  7 .pos-a {
  8     position: absolute;
  9 }
 10 
 11 .pos-r {
 12     position: relative;
 13 }
 14 
 15 .pull-left {
 16     float: left;
 17 }
 18 
 19 .pull-right {
 20     float: right;
 21 }
 22 
 23 .m-hoz-auto {
 24     margin-left: auto;
 25     margin-right: auto;
 26 }
 27 
 28 .left-32 {
 29     left: 32px;
 30 }
 31 
 32 .left-5 {
 33     left: 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     background-color: black;
 53 }
 54 
 55 .bacc-blue {
 56     background-color: rgb(2, 159, 227);
 57 }
 58 
 59 .bacc-brown-red {
 60     background-color: rgb(216, 5, 23);
 61 }
 62 
 63 .bacc-mouse-red {
 64     background-color: #E80115;
 65 }
 66 
 67 .bacc-mouse-orange {
 68     background-color: #EF6C1C;
 69 }
 70 
 71 .bacc-bell-yellow {
 72     background-color: #F5D600;
 73 }
 74 
 75 .border-black-1 {
 76     border: 1px solid black;
 77 }
 78 
 79 .border-black-2 {
 80     border: 2px solid black;
 81 }
 82 
 83 .border-black-3 {
 84     border: 3px solid black;
 85 }
 86 
 87 .oh {
 88     overflow: hidden;
 89 }
 90 
 91 /*卡通組件*/
 92 .doraemon {
 93     height: 500px;
 94     width: 500px;
 95 }
 96 
 97 .head {    
 98     height: 300px;
 99     overflow: hidden;
100     width: 310px;
101     z-index: 2;
102 }
103 
104 .eyes {
105     height: 80px;
106     margin: -5px auto 0;
107     padding-top: 10px;
108     width: 120px;
109 }
110 
111 .eye {
112     border: 2px solid #000;
113     box-sizing: border-box;
114     height: 80px;
115     width: 60px;
116 }
117 
118 .eye-left {
119     float: left;
120     margin-left: 2px;
121 }
122 
123 .eye-right {
124     float: right;
125     margin-left: 58px;
126 }
127 
128 .eye-pupil {
129     background-color: black;
130     height: 18px;
131     width: 18px;
132 }
133 
134 .eye-pupil-left {
135      left: 32px;
136 }
137 
138 .eye-pupil-right {
139      left: 5px;
140 }
141 
142 .face {
143     border-top-left-radius: 45% 60%;
144     border-top-right-radius: 45% 60%;    
145     border-bottom-left-radius: 60% 85%;
146     border-bottom-right-radius: 60% 85%;
147     height: 230px;
148     margin: -30px auto;
149     width: 270px;
150 
151     z-index: 5;
152 }
153 
154 .nose {
155     height: 38px;
156     margin: 16px auto 0;
157     width: 38px;
158 }
159 
160 .nose-light {
161     height: 10px;
162     right: 10px;
163     top: 8px;
164     width: 10px;
165 }
166 
167 .nasal-groove{
168     height: 45px;
169     width: 2px;
170     z-index: 12;
171 }
172 
173 .bread-field {
174     height: 44px;
175     width: 240px;
176     z-index: 10;
177 }
178 
179 .bread {
180     height: 2px;
181     width: 80px;
182 }
183 
184 .bread-left {
185     left: 10px;
186     -webkit-transform-origin: right top;
187 }
188 
189 .bread-left-1 {
190     
191     top: -5px;
192     -webkit-transform: rotate(20deg);
193 }
194 
195 .bread-left-2 {
196     top: 10px;
197     -webkit-transform: rotate(5deg);
198 }
199 
200 .bread-left-3 {
201     top: 20px;
202     -webkit-transform: rotate(-15deg);
203 }
204 
205 .bread-right {
206     right: 10px;
207     -webkit-transform-origin: left top;
208 }
209 
210 .bread-right-1 {
211     top: -5px;
212     -webkit-transform: rotate(-20deg);
213 }
214 
215 .bread-right-2 {
216     top: 10px;
217     -webkit-transform: rotate(-5deg);
218 }
219 
220 .bread-right-3 {
221     top: 20px;
222     -webkit-transform: rotate(15deg);
223 }
224 
225 .lips {
226     height: 10px;
227     width: 250px;
228 }
229 
230 .lips-center {    
231     height: 75px;
232     overflow: hidden;
233     width: 145px;
234 }
235 
236 .lips-center-inside {
237     border-top-left-radius: 65%;
238     border-top-right-radius: 65%;
239     border-style: none;
240     border-top-style: solid;
241 
242     height: 75px;
243     margin-left: -50px;
244     width: 250px;
245 }
246 
247 .lips-center-left {    
248     height: 40px;
249     margin-left: 10px;
250     overflow: hidden;
251     width: 40px;
252 }
253 
254 .lips-center-left-inside {
255     border-bottom-left-radius: 50% 50%;
256     border-bottom-right-radius: 50% 50%;
257     border-top:none;
258     border-left:none;
259     border-right:none;
260     content: " ";
261     display: block;
262     height: 45px;
263     margin-left: -30px;
264     margin-top: -36px;
265     width: 100px;
266 }
267 
268 .lips-center-right {
269     height: 40px;
270     overflow: hidden;
271     width: 40px;
272 }
273 
274 .lips-center-right-inside {
275     border-bottom-left-radius: 50%;
276     border-bottom-right-radius: 50%;
277     border-top:none;
278     border-left:none;
279     border-right:none;
280     content: " ";
281     display: block;
282     height: 45px;
283     margin-left: -34px;
284     margin-top: -37px;
285     width: 100px;
286 }
287 
288 .lips-left {
289     border-top-left-radius: 60% 50%;
290     border-top-right-radius: 0%;
291     border-bottom-left-radius: 75% 50%;
292     border-bottom-right-radius: 0%;
293     border-right: none;
294     height: 60px;
295     left: -22px;
296     top: -59px;
297     width: 40px;
298 
299     -webkit-transform: rotate(15deg) ;
300 }
301 
302 .lips-right {
303     border-top-right-radius: 55% 50%;
304     border-top-left-radius: 0%;
305     border-bottom-right-radius: 80% 50%;
306     border-bottom-left-radius: 0%;
307     border-left: none;
308     height: 60px;
309     right: -22px;
310     top: -59px;
311     width: 40px;
312 
313     -webkit-transform: rotate(-9deg) ;
314 }
315 
316 .mouth {
317     border-bottom-left-radius: 50% 100%;
318     border-bottom-right-radius: 50% 100%;
319     border-top: none;
320     height: 150px;
321     margin-top:-50px;
322     width: 240px;
323 }
324 
325 .tongue {
326     border-bottom-left-radius: 50% 100%;
327     border-bottom-right-radius: 50% 100%;
328     border-top: none;
329     height: 65px;
330     margin-left: 35px;
331     top: -30px;
332     overflow: hidden;
333     width: 170px;
334 }
335 
336 .tongue-left {
337     height: 65px;
338     margin-top: 20px;
339     margin-left: 15px;
340     overflow: hidden;
341     width: 80px;
342     z-index: 2;
343 }
344 
345 .tongue-left-inside {
346     border-top-left-radius: 50% 80%;
347     border-top-right-radius: 50% 80%;    
348     border-bottom: none;
349 
350     height: 65px;
351     width: 80px;
352     z-index: 2;
353 
354     -webkit-transform: rotate(-45deg);
355 }
356 
357 .tongue-right {    
358     height: 60px;
359     margin-top: -67px;
360     margin-left: 83px;
361     overflow: hidden;
362     width: 80px;
363     z-index: 3;
364 }
365 
366 .tongue-right-inside {
367     border-top-left-radius: 50% 80%;
368     border-top-right-radius: 50% 80%;    
369     border-bottom: none;
370     margin-top: 2px;
371     margin-left: -11px;
372     height: 60px;
373     width: 80px;
374     z-index: 3;
375 
376     -webkit-transform: rotate(45deg);
377 }
378 
379 .collar {
380     margin-top:-40px;
381     height: 40px;
382     width: 220px;
383     z-index: 3;
384 }
385 
386 .collar-inside {    
387     border: 20px solid rgb(216, 5, 23);
388     height: 50px;
389     margin-top: -50px;
390     margin-left: -19px;
391     width: 220px;
392 }
393 
394 .collor-border-top {
395     height: 55px;
396     margin-top: -38px;
397     margin-left: 0px;
398     width: 220px;
399 }
400 
401 .collor-border-bottom {
402     height: 73px;
403     margin-top: -75px;
404     margin-left: -17px;
405     width: 250px;
406 }
407 
408 .bell {
409     height: 53px;
410     margin-top: -15px;
411     width: 53px;
412     z-index: 5;
413 }
414 
415 .bell-middle-curve {
416     height: 50px;
417     width: 100px;
418 }
419 
420 .bell-middle-curve-1 {
421     margin-top: 12px;
422     margin-left:-27px;
423 }
424 
425 .bell-middle-curve-2 {
426     margin-top: -48px;
427     margin-left:-27px;
428 }
429 
430 .bell-hole {
431     height: 8px;
432     margin-top: -46px;
433     margin-left: 21px;
434     width: 8px;
435 }
436 
437 .bell-gap {
438     height: 16px;
439     margin-left: 26px;
440     width: 0px;
441 }
442 
443 .body {
444     height: 162px;
445     top: -65px;
446     width: 430px;
447     z-index: 1;
448 }
449 
450 .body-inside {
451     border-top-left-radius: 15% 75%;
452     border-top-right-radius: 12% 75%;
453     border-bottom-left-radius: 15% 50%;
454     border-bottom-right-radius: 25% 50%;
455     height: 180px;
456     margin-top: -5px;
457     width: 220px;
458     z-index: 2;
459 }
460 
461 .belly {
462     border-top-left-radius: 37% 50%;
463     border-top-right-radius: 37% 50%;
464     border-bottom-left-radius: 50% 50%;
465     border-bottom-right-radius: 50% 50%;
466     height: 125px;
467     margin-top: -165px;
468     width: 175px;
469     z-index: 10;
470 }
471 
472 .bag {
473     height: 75px;
474     margin-top: 50px;
475     padding-top: 5px;
476     width: 146px;
477 }
478 
479 .bag-top {
480     border-radius: 40%;
481     height: 40px;
482     margin-top: -42px;
483     margin-left: -20px;
484     width: 180px;
485 }
486 
487 .bag-bottom {
488     border-bottom-left-radius: 50% 32%;
489     border-bottom-right-radius: 50% 32%;
490     height: 140px;
491     margin-top: -83px;
492     margin-left: 0px;
493     width: 142px;
494 }
495 
496 .left-hand {
497     height: 80px;
498     margin-top: -139px;
499     margin-left: 25px;
500     width: 80px;
501     z-index: 0;
502 }
503 
504 .left-arm {
505     border-top-left-radius: 45% 40%;
506     border-bottom-left-radius: 45% 30%;
507     height: 45px;
508     margin-top: 33px;
509     margin-left: 40px;
510     width: 95px;
511     
512     -webkit-transform: rotate(-30deg);
513     -webkit-transform-origin: left bottom;
514 }
515 
516 .left-palm {
517     height: 45px;
518     margin-top: -50px;
519     margin-left: 10px;
520     width: 45px;
521 }
522 
523 .right-hand {
524     height: 80px;
525     margin-top: -115px;
526     margin-left: 225px;
527     width: 80px;
528     z-index: 0;
529 }
530 
531 .right-arm {
532     border-top-right-radius: 45% 40%;
533     border-bottom-right-radius: 45% 30%;
534     height: 45px;
535     margin-top: 33px;
536     margin-left: 40px;
537     width: 95px;
538     
539     -webkit-transform: rotate(30deg);
540     -webkit-transform-origin: right bottom;
541 }
542 
543 .right-palm {
544     height: 45px;
545     margin-top: -52px;
546     margin-left: 120px;
547     width: 45px;
548 }
549 
550 .left-leg {
551     height: 63px;
552     margin-top: 25px;
553     margin-left: 101px;
554     width: 120px;
555     z-index: 3;
556 }
557 
558 .left-leg-inside {
559     border-top-left-radius: 35% 100%;
560     border-bottom-left-radius: 25% 55%;
561     border-bottom-right-radius: 100% 20%;
562     border-right: none;
563     height: 55px;
564     margin-top: -16px;
565     width: 120px;
566 }
567 
568 .crotch {
569     height: 15px;
570     margin-top: -37px;
571     margin-left: 192px;
572     width: 40px;
573     z-index: 5;
574 }
575 
576 .crotch-inside {
577     border-top-left-radius: 50% 60%;
578     border-top-right-radius: 50% 60%;
579     border-bottom: none;
580     height: 50px;
581     width: 40px;
582 }
583 
584 .right-leg {
585     height: 63px;
586     margin-top: -62px;
587     margin-left: 209px;
588     width: 120px;
589     z-index: 3;
590 }
591 
592 .right-leg-inside {
593     border-top-right-radius: 35% 100%;
594     border-bottom-right-radius: 25% 55%;
595     border-bottom-left-radius: 100% 20%;
596     border-left: none;
597     height: 55px;
598     margin-top: -17px;
599     margin-left: -4px;
600     width: 120px;
601 }
602 
603 .left-foot {
604     border-top-left-radius: 60% 60%;
605     border-top-right-radius: 50% 85%;
606     border-bottom-left-radius: 43% 75%;    
607     border-bottom-right-radius: 50% 55%;
608     height: 50px;
609     margin-top: -32px;
610     margin-left: 72px;
611     width: 133px;
612 
613     -webkit-transform: rotate(-5deg);
614 }
615 
616 .right-foot {
617     border-top-left-radius: 50% 85%;
618     border-top-right-radius: 60% 60%;
619     border-bottom-left-radius: 50% 55%;
620     border-bottom-right-radius: 43% 75%;
621     height: 50px;
622     margin-top: -30px;
623     margin-left: 218px;
624     width: 133px;
625 
626     -webkit-transform: rotate(5deg);
627 }

View Code

（在這里再發一次demo鏈接，希望可以省去你滾動回本文頂部的時間）

（至於畫完這個接着做什么，現在有幾個想法可以做，也可能做其他東西，管他呢，隨心而至就是了）

有任何問題或意見，歡迎交流。

如果發現本文有什么問題（如錯別字），請不吝告知，謝謝。

轉載請注明出處：[css]我要用css畫幅畫(七) - 哆啦A夢

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [css]我要用css畫幅畫(一) [css]我要用css畫幅畫(二) 純CSS制作加

制作動畫版哆啦A夢【Python】繪制哆啦A夢 Scratch 3 矢量編輯器——“臨摹”一只哆啦A夢 Windows程序設計畫圖實現哆啦A夢 css畫愛心並實現“愛心跳動” 用CSS畫五角星 css3畫太極圖 css畫菱形的兩種方式