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

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

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

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

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

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

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