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

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

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

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

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

 div >蛙蛙的通用樣式
觀察一個每一個蛙蛙表情，雖然每一個表情形態(tài)各異，但是它們的身體、嘴巴、眼睛、小紅暈的位置和大小幾乎都是一致，這些一致的樣式我們可以寫成公用樣式，每個蛙蛙的特征再根據(jù)每個人蛙蛙的id寫單個的樣式進行重繪或者覆蓋。
 div >
蛙蛙基本公用樣式.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)上要加上紅暈的div，嘴巴眼睛的樣式也要做相應的修改。（主要是嘴巴、紅暈和紅色愛心的制作）
 div >第二只蛙蛙動圖.gif第三只小青蛙
第三只小青蛙相對于公共樣式的變化是眼睛和嘴巴的變化，所以最主要的是畫出左眼樣式和嘴巴樣式。
舌頭的制作一個橢圓旋轉(zhuǎn)對應的角度額按后被嘴巴遮擋住一部分制作而成，

第三只青蛙的舌頭分解顯示.png
 div >
以上就是html打造可愛的蛙蛙表情的詳細內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。