大家已經見慣了用css3畫的圖示、logo、頭像,這次台灣同學rei給我們帶來了用純css3繪製的日本動漫《輕音少女》女主角秋山澪的動態頭像。css3的強大再次霸氣測漏!
demo檢視效果,示例支援chrome、firefox、opera、safari等全系列的現代瀏覽器。
示例中用到的主要css3特性如下:
border-radius:繪製邊框圓角。
transform:主要是旋轉(rotate)和偏斜(skew),用於繪製各種形狀。
animation:動畫效果的實現,例如頭髮的飄動、眼睛的閃動。
只要掌握了這幾個特性,你也能畫出同樣奇妙的css3動畫,趕快試試吧!
用純CSS3繪製萌系漫畫人物動態頭像
大家已經見慣了用css3畫的圖示 logo 頭像,這次台灣同學rei給我們帶來了用純css3繪製的日本動漫 輕音少女 女主角秋山澪的動態頭像。看到 我震驚了!css3的強大再次霸氣測漏!示例中用到的主要css3特性如下 border radius 繪製邊框圓角。transform 主要是旋轉 rot...
CSS3 使用純css繪製天貓logo
本文主要記錄如何使用純css繪製出乙個天貓logo,即那只黑色的貓。在編寫 之前,注意一些有用的小tips html 如下所示 class wrap class ear class earl class earr class earm div class face class eyel div cl...
純CSS3繪製打火機動畫火焰特效
主要涉及到了以下屬性 animation webkit animation keyframes name webkit keyframes name transform,transform origin,transition,box shadow spread屬性 text shadow z ind...