純CSS實現的很酷的卡通肖像和眨眼動效

標籤：技術趨勢   一個人   響應   size   bar   alt   代碼   imp   targe   

產品設計技術趨勢

當前產品設計和開發的一個主要技術趨勢除了響應式外，

還有盡量使用CSS/HTML5技術替代圖片，這樣能夠獲得非常好的設計擴充性和頁面訪問效能。

CSS卡通執行個體

以下就是一個英國WEBproject師設計開發的一個非常酷的卡通頭像，使用純CSS實現，還能夠簡單的切換膚色：）

示範頁面訪問連結，辛普森家族頭像

註：辛普森家族（Simpson family）是美國動畫情景喜劇《辛普森一家》中的一支虛構家族。

使用的技術

和藝術家素描使用的技術有異曲同工之處。首先把每一個人物的臉拆解為不同的形狀，然後逐步拼湊成肖像。

以下就是拆解後的辛普森人物模型：

依照上述模型，依次構造出頭髮、頭部、眼睛、鼻子、耳朵、嘴巴、下巴、脖子的CSS DIV塊，然後使用絕對位置拼在一起，

Bart的“頭部”示範CSS代碼例如以下：

position: absolute;top: 20px;left: 33px;width: 9px;height: 7px;background: #fbd800;border-top: 1px solid #110b00;border-left: 1px solid #110b00;-webkit-transform: rotate(25deg) skew(23deg, 16deg);-ms-transform: rotate(25deg) skew(23deg, 16deg);transform: rotate(25deg) skew(23deg, 16deg);-webkit-border-radius: 2px 0 0 0;-moz-border-radius: 2px 0 0 0;border-radius: 2px 0 0 0;

很多其它CSS代碼請訪問示範字碼頁面。

by iefreer

純CSS實現的很酷的卡通肖像和眨眼動效