主要涉及到了以下屬性：
animation(webkit-animation),
@keyframes name (@-webkit-keyframes name),
transform,
transform-origin,
transition,
box-shadow（spread屬性）,
text-shadow
z-index
linear-gradient。
radial-gradient
background-image
hover me
@charset "utf-8";
body
:before,:after
.kebody
.ketitle
.kepublic
.playground
.flame
.playground:hover .flame
.playground:hover .lid
.lighterbody
.lighterbody:before
.lighterbody:after
.lid
.lid:before
.hover
.hover:before
@-webkit-keyframes flame
25%60%
70%100%
}@-webkit-keyframes lidoff
to}
動態**
動畫效果主要有兩個，一是當滑鼠懸停在「hover me」上面時打火機蓋子開啟的情形，由下面的動畫**實現：
@-webkit-keyframes lidoff
to}
蠟燭燈光的隨風擺動效果是由下面的**實現的：
@-webkit-keyframes lidoffto}
當打火機開啟時出現的圓球和白色的小正方形，是由:after :before 配合z-index實現的效果。
下面來介紹通過這個例子我的學到的幾個屬性需要注意的地方。
transform-origin: 預設的初始位置是影象的中心，100% 100%相當於 right bottom.
0% 0%相當於 left top.
:before 和:after: 注入的內容是有關聯的目標元素的字子元素，但它會被置於這個元素任何內容的「前」 或"後"。插入的內容在頁面的原始碼裡是看不見的，只能在css裡看見。同時插入的元素在預設情況是內聯元素。因此，為了給插入的元素賦予高度、填充、邊距等等，通常必須顯示的定義乙個塊級元素（display:block）。
此外，雖然可能不會插入任何內容，但是content必須寫上，如果不插入任何內容，那麼content寫成content:"";
ie6和ie7不相容這兩個為元素
偽元素(雙冒號)，css3中的偽類是（單冒號）
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
background-image:解決了div只能設定乙個背景的問題，使乙個div可以設定多個背景。
box-shadow:乙個經常被遺忘的引數--
spread(擴充套件陰影半徑),這個曾經被遺忘的spread改變陰影的大小---其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之是負值，則縮小。有了這個引數後可以使用box-shadow像photoshop中的陰影工作一樣，製作單邊陰影效果。這裡注意一點，這個擴充套件陰影值需要和陰影模糊半徑配合使用，一般情況是「擴充套件陰影半徑一般設定為和模糊半徑大小，並去其負值」
純css3 載入loading動畫特效
最近專案中要實現當頁面還沒有載入完給使用者提示正在載入的loading，本來是想做個提示的，但是如果放大電腦的解析度就會感覺到很虛，體驗效果很不好。於是就採用css3 js實現這個loading的動畫效果，最終在我們前端工程師的幫助之下完成。所以記錄在這裡，如果感興趣的朋友也可以看看，大家互相焦爐學...
純css3 載入loading動畫特效
最近專案中要實現當頁面還沒有載入完給使用者提示正在載入的loading，本來是想做個提示的，但是如果放大電腦的解析度就會感覺到很虛，體驗效果很不好。於是就採用css3 js實現這個loading的動畫效果，最終在我們前端工程師的幫助之下完成。所以記錄在這裡，如果感興趣的朋友也可以看看，大家互相焦爐學...
CSS3 使用純css繪製天貓logo
本文主要記錄如何使用純css繪製出乙個天貓logo，即那只黑色的貓。在編寫 之前，注意一些有用的小tips html 如下所示 class wrap class ear class earl class earr class earm div class face class eyel div cl...