原來一直使用qq直接登入的部落格，今天繫結了一下郵箱，原來的部落格全沒了，只好把原來備份的博文重新發了一下，還好只有兩篇~
昨天把css3實現翻書樣式的效果實現了大半，今天將其主體的樣式全部實現了，下面將進行說明：
我們仔細觀察書本的樣式發現書本底下是有陰影的，而且陰影可以隨著翻書的動作來移動，書皮的左右兩側也分別有一條封邊，看起來非常真實，這裡主要是使用了元素的after和before屬性，對其進行了實現。
首先是靜止的陰影的**：
.bottom這裡可以看到，我們對最底部幾乎不動的書頁的第一頁的before屬性加上了乙個外陰影，只是加上外陰影的話它會出現在書頁的左側，所以將其進行了旋轉，轉到了書本的下方，再根據需要進行x軸和y軸的平移最終完成了靜止部分陰影的效果。li:nth-child(1):before
下面是跟隨頁面翻動的左側陰影效果：
.front這段**與上面的**幾乎一樣，只是before的物件變成了front也就是上本書頁，這樣在翻動時，陰影就會隨之移動。li:nth-child(1):before
最後是書頁、封皮左右封邊效果的實現：
.cover對書皮的第乙個li設定4個畫素的寬度，100%的高度然後分別使用left把他們放到兩邊這樣就輕鬆完成了封邊的效果，這樣使用css3實現書籍樣式就完成了，其他還有一些細節的地方比如滑鼠離開書籍合上的動畫，相當於執行一次反操作，我這裡就沒有寫啦~~li:nth-child(1):after
.cover
li:nth-child(1):before
總結：before和after對於給乙個模組加細節實在是不要太好用，感覺像是物理引擎中給父物件加上乙個子節點的感覺，它可以附著在父物件上，跟隨者父物件的dom操作而移動變化，不用再寫新的dom。但是也與不好之處，比如在本案例中，如果我們想使書籍開啟後，仍能看到封面左側封邊的效果（給front的backface-visibility屬性設定為hidden，翻過去就看不見了，跟背面剪裁一樣），給before設定效果是無效的，所以還是要靈活使用啦。還有記得使用before,after時一定要加上content，就算沒有內容也得加上，開始我沒有加怎麼試都試不出來效果，最後附上成品的：
效果就是這麼個樣子，我傳到github上啦，有興趣看看哦~
CSS3 實現翻書效果
body ulul li一般3d層給實現3d效果的父盒子，視距給最大的盒子body。在給子元素設定旋轉角度過程中，使用偽類選擇器可以減少記憶體的占用，這裡使用到 nth child 偽類。主要css 如下 ul hover li nth child 1 ul hover li nth child 2...
CSS3實現載入效果
預期實現的效果如下如所示 首先基本的html布局如下 對於的css 如下 首先設定一下基本的樣式 wrap wrap div 完成上面的css樣式定義後，頁面上就會有五個排列整齊的小細條了。然後我們來新增動畫效果 在 wrap div加入如下 webkit animation fadeout 1s ...
css3實現網格效果
利用background image裡的liner gradient屬性可以實現一些簡單的css網格背景，能自適應背景，挺實用的，下面就簡單的介紹兩款網格背景 1.桌布花紋 紅.png 塊height 300px width 300px background white background ima...