定義哆啦a夢的容器

千篇一律先定義一個畫哆啦a夢的大容器，確定它的大小和位置。

 !-- 哆啦A夢大容器 --  p >
畫哆啦a夢的頭部（包括臉，臉部包括眼睛和鼻子）
頭部包含好幾塊部分：哆啦a夢的臉部和鼻子，臉部又包括兩只眼睛，兩只眼睛里面還有眼珠和眼白部分，所以會有好幾層的dom嵌套，當然基本圖形都是由p+border-radius拼湊而成。
將畫好的各個部位品拼湊到相應的位置上即可。
看我前面畫的幾個圖畫就知道border-radius是一個非常常用的屬性，幾乎p的每一次變形都離不開它，其實border-radius的真面目應該是border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;醬紫的，我們一般不寫斜杠后面的內容，斜杠切面是水平長度，斜杠后面是垂直高度，前杠后面默認不寫就是水平和垂直大小是一樣的。我知道我這樣說不夠詳細，可以參考我鑫神的博客秋月何時了，CSS3 border-radius知多少？，保證你分分鐘在老司機的帶領下徹底弄懂border-radius，還不快上車？
 !-- 頭 --  p >

哆啦a夢的頭部.png
畫哆啦a夢的嘴巴部分
嘴巴應該是很簡單的了吧，看一眼就知道是是用邊框+border-radius實現的。
 p >
 

哆啦a夢的嘴巴.png
畫哆啦a夢的胡須部分
胡須部分其實在上一篇文章畫html打造動畫【連載3】- 小貓笑臉動畫里面畫胡須的時候就已經介紹了畫胡須的方法，在這里就不贅述了，基本思路都是一樣的。
 !-- 胡須 --  p >
 

哆啦a夢的胡須.png
畫哆啦a夢的脖子部分(脖子部分包括鈴鐺)
脖子就是基本p變形之后的圖形，多余的部分隱藏到頭部下面就可以了。
鈴鐺部分是各個很簡單的基本圖形組成。
 !-- 脖 --  p >
 

哆啦a夢的脖子.png
完成哆啦a夢的動態效果
動起來的哆啦a夢才比較萌對吧，那我們就讓它動起來吧（transition屬性）。
鼠標移動到眼睛部位左眼珠移動到左邊。
鼠標移動到嘴巴部位，臉部表情變化。
鼠標移動到鈴鐺部分，鈴鐺變大。
/*眼睛動效*/.head:hover .face p:first-child p{ left: 0px; transition: all 1s; .head:hover .face p:first-child p p{ left: 0px; transition: all 1s;/*嘴巴動效，嘴巴的dom容器下面要加了個空的p容器*/.mouth p:first-child{ width: 82px; height: 2px; background: #000; position: absolute; z-index: 1000; top: -25px; left: 6px; display: none; .mouth p:nth-child(2){ width: 82px; height: 2px; background: #000; position: absolute; z-index: 1000; top: -25px; left: 90px; display: none; .mouth:hover{ border-radius: 0; width: 180px; height: 200px; .mouth:hover p:first-child,.mouth:hover p:nth-child(2){ display: block;/*鈴鐺動效*/.neck:hover p:first-child{ width: 60px; height: 60px; left: 50%; margin-left: -30px; .neck:hover p:nth-child(2){ width: 66px; height: 7.5px; left: 50%; margin-left: -33px; .neck:hover p:nth-child(3){ width: 12px; height: 12px; left: 50%; margin-left: -6px; top: 385px; .neck:hover p:nth-child(4){ width: 2px; height: 12px; left: 50%; margin-left: 1px; top: 400px; }
 

以上就是分享html打造動畫哆啦A夢的示例代碼的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。