我們一般做水平三列布局都是用的float方法，將每一塊浮動顯示在同一行。這種方法會導(dǎo)致元素沒有原來的高度屬性，要用清除浮動來解決空間占據(jù)問題。對于那些特殊布局非常不方便，比如，垂直居中就不容易實現(xiàn)。

2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局。目前，它已經(jīng)得到了幾乎所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項功能。基本語法查看博客：Flex 布局教程：語法篇

另外還要對css中的偽元素有一定的了解：before、after

最后想要表情動起來，最主要的就是animation屬性的使用了。

我們先對整體座椅個布局，使各個表情能直觀的展示在各個位置上，因為每個表情幾乎占據(jù)的是一個正方形的空間，所以我們將每個青蛙表情水平展示在頁面上，這里就用到了flex布局方式。

 p >蛙蛙的通用樣式
觀察一個每一個蛙蛙表情，雖然每一個表情形態(tài)各異，但是它們的身體、嘴巴、眼睛、小紅暈的位置和大小幾乎都是一致，這些一致的樣式我們可以寫成公用樣式，每個蛙蛙的特征再根據(jù)每個人蛙蛙的id寫單個的樣式進(jìn)行重繪或者覆蓋。
 p >

蛙蛙基本公用樣式.png
第一只小青蛙第一只小青蛙
第一只小青蛙是在基本樣式的基礎(chǔ)上有一個嘴角上揚的動態(tài)效果，所以要完成第一只蛙蛙的繪制，只要在公用樣式的基礎(chǔ)上加上嘴巴的動效就可以了，dom結(jié)構(gòu)也是一樣的。
.frog#frog-1 .body .mouth {width: 18px;height: 22px;border-bottom: 3px solid #3F6A34;position: absolute;top: 6px;left: 0;right: 0;-webkit-animation: smile 3.8s linear 0s infinite; animation: smile 3.8s linear 0s infinite;@-webkit-keyframes smile {0% { border-radius: 0%;20% { border-radius: 50%;70% { border-radius: 50%;@keyframes smile {0% { border-radius: 0%;20% { border-radius: 50%;70% { border-radius: 50%;}

第一只蛙蛙動圖.gif
第二只小青蛙
第二只小青蛙的嘴巴是一個大嘴巴，臉頰上還有兩個小紅暈，眼睛是冒著愛心的，所以在dom結(jié)構(gòu)上要加上紅暈的p，嘴巴眼睛的樣式也要做相應(yīng)的修改。（主要是嘴巴、紅暈和紅色愛心的制作）
 p >
第二只蛙蛙動圖.gif
第三只小青蛙
第三只小青蛙相對于公共樣式的變化是眼睛和嘴巴的變化，所以最主要的是畫出左眼樣式和嘴巴樣式。
舌頭的制作一個橢圓旋轉(zhuǎn)對應(yīng)的角度額按后被嘴巴遮擋住一部分制作而成，

第三只青蛙的舌頭分解顯示.png
 p >
第三只蛙蛙動圖.gif
第四只小青蛙
第四只小青蛙相對于公共樣式的變化是眼睛和嘴巴的變化，眼睛的眼珠里面有兩個亮光點，嘴巴是大嘴巴并且可以一張一合，嘴巴里面還有一個小舌頭。它的光暈處于一會有一會沒有的狀態(tài)。
 p >
第四只蛙蛙動圖.gif
剩余的其它蛙蛙
其它蛙蛙的畫法都是基于通用樣式的基礎(chǔ)上對獨特樣式進(jìn)行編寫，最重要的是對動畫幀的控制，各種形狀就是基本幾何圖形的拼接（正方形，border-radius，transform，position的合理運用）。
由于代碼量太大我就不在文章里贅述，主要還是對動畫幀的熟練運用！（重要的事情說三遍）。
以上就是關(guān)于html如何打造動畫可愛的蛙蛙表情的案例分享的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。