CSS3 使用純css繪製天貓logo

本文主要記錄如何使用純css繪製出乙個天貓logo，即那只黑色的貓。在編寫**之前，注意一些有用的小tips:

html**如下所示：

class="wrap">

class="ear">

class="earl">

class="earr">

class="earm">

div>

class="face">

class="eyel">div>

class="eyer">div>

class="mouthl">div>

class="mouthr">div>

div>

class="bodytop">div>

class="bodybottom">div>

css**如下所示：

.wrap

.ear
.earl
.earl
:after
.earr
.earm
.face
.eyel
.eyer
.eyel
:after
.eyer
:after
.face
:after
.mouthl
.mouthr
.bodytop
.bodybottom
.bodytop
:before
.bodytop
:after
.bodybottom
:before
.bodybottom
:after

css3 繪製畫圓 扇形

css已經越來越強大了 可以使用它來繪製各種簡單的形狀，用於代替顯示，這次的分享主要用到畫圓，扇形 實現圓形 效果如下 border radius圓角的四個值按順序取值分別為 左上 右上 右下 左下。這裡只設定乙個值，代表四個角的取值都為為50 原理 border radius 50 彎曲元素的邊框...

css畫鐘錶 如何使用css3繪製出圓形動態時鐘

使用css3繪製出圓形動態時鐘的原理 眾所周知的是div形狀是方形的，那麼我們首先需要使用border radius屬性將其變換成圓形。為了使指標轉動起來，我們需要使用 webkit transform origin center100px 來設定我們的旋轉基點。然後利用 webkit transf...

純CSS3繪製打火機動畫火焰特效

主要涉及到了以下屬性 animation webkit animation keyframes name webkit keyframes name transform,transform origin,transition,box shadow spread屬性 text shadow z ind...