咱們每次畫一個(gè)圖片，肯定先要確定一個(gè)容器，幾確定一下圖形的位置和大小。

 div >畫喵咪的頭部和頭部的花紋

按照繪畫習(xí)慣，我們肯定是先畫最大的頭部，頭部確定了，耳朵嘴巴的位置才能確定。

 !-- 貓咪的頭部框架 --  div >

貓咪的耳朵分布在頭部的左右兩邊，所以肯定是由兩個(gè)div畫成，為了不顯得那么僵硬，我們可以把兩邊的耳朵稍微畫的不一樣大。

大家肯定會想：耳朵的形狀這么奇怪，到時(shí)是怎么畫的呢？其實(shí)很簡單，就是通過矩形然后設(shè)置各個(gè)角度的border-radius就會形成一種尖角的效果，再旋轉(zhuǎn)相應(yīng)的角度跟頭部貼合就可以了。

最后將耳朵隱藏在臉部的后面，露出一點(diǎn)點(diǎn)耳尖就可以了。

 !--繪制耳朵的容器--  div >

眼睛部分有點(diǎn)復(fù)雜喲，不經(jīng)過仔細(xì)的一番研究和強(qiáng)大的想象力是很難畫出來的：解剖一下就是上下兩個(gè)橢圓重疊而成，多余的部分隱藏，中間的褐色眼珠是在上面圓形中的一個(gè)黑色矩形。

 div >

喵咪的胡須可是很重要的喲，如果不小心把它剪了可是很嚴(yán)重的，貓咪就再也無法測量自己可以鉆進(jìn)多大的洞里了，哈哈。

仔細(xì)觀察花紋其實(shí)就是由左右各5條線條組成，畫出線條再做相應(yīng)的變換就可以了。

 div >

感覺這是整個(gè)貓咪最好畫的地方了，簡單的一個(gè)半圓就可以解決問題啦~啦啦啦啦~

 div >

咦？是不是感覺畫著畫著就到了最后一部分了，哈哈哈哈哈，好開心啊~又吃成長快樂了~

嘴巴就像兩撇小胡子，用兩個(gè)矩形邊框就可以實(shí)現(xiàn)了。

 div >

各個(gè)部位都畫好之后，又到了像大白一樣的拼圖時(shí)間了，哈哈~大家一起拼出一個(gè)萌萌噠小貓吧~(主要是對transition屬性的運(yùn)用，設(shè)置:hover之后的屬性，然后用transition設(shè)置屬性完成變化的過渡時(shí)間)

我們家毛球可是個(gè)動如脫兔的家伙哦，所以我們來給貓咪加點(diǎn)特效吧~(^__^)

鼠標(biāo)移動上去之后兩耳耳朵左右擺動

眼睛瞇瞇呈現(xiàn)笑臉的形狀

嘴角上揚(yáng)

/*鼠標(biāo)浮動耳朵樣式*/.mao:hover .erduo div:first-child { left: -10px; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 4% 80% 0% 60%;}.mao:hover .erduo div:last-child { right: -10px; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 80% 4% 60% 0%; /*transition: transform 1s,right 1s;*/}/*瞇眼并且出現(xiàn)紅暈的動態(tài)效果，眼珠的寬度變寬*/.mao:hover .yanquan div:first-child {width:40px; margin-left: 30px;}.hong { position: absolute; height: 28px; width: 70px; background: red; top: 34px; /*top: 64px;*/ left: 18px; border-radius: 50% 50% 50% 50%; background-image: -moz-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); background-image: -webkit-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); background-image: -ms-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); opacity: 0.0; /*transition: opacity 0.5s ease-in 0.2s;*/}/*眼睛浮動屬性*/.mao:hover .yanquan_hedding { margin-top: 30px; /*transition: margin-top 1s;*/}.mao:hover .hong { /*top: 34px;*/ opacity: 0.8; transition: opacity 0.5s ease-in 0.2s;}/*嘴巴上揚(yáng)的效果*/.mao:hover .zuiba div:first-child { border-radius: 50% 50% 50% 50%;width: 40px;}.mao:hover .zuiba div:nth-child(2) {  width: 40px;margin-left: -30px;border-radius: 50% 50% 50% 50%;}

PS：眼睛瞇起來之后下面出現(xiàn)了一部分紅暈，就是兩個(gè)背景顏色半透明的小橢圓組成的，只要在鼠標(biāo)移動上去只會把橢圓顯示出來就可以了。

學(xué)習(xí)過程中遇到什么問題或者想獲取學(xué)習(xí)資源的話，歡迎加入學(xué)習(xí)交流群

以上就是html實(shí)現(xiàn)的動圖之小貓笑臉的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。