CSS3 實現翻書效果

body

ulul li

在給子元素設定旋轉角度過程中，使用偽類選擇器可以減少記憶體的占用，這裡使用到:nth-child()偽類。

主要css**如下：

ul:hover li:nth-

child(1
)        ul:hover li:nth-
child(2
)        ul:hover li:nth-
child(3
)        ul:hover li:nth-
child(4
)        ul:hover li:nth-
child(5
)

完整**如下：

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
*        body
ulul li
ul:hover
ul:hover li:nth-
child(1
)        ul:hover li:nth-
child(2
)        ul:hover li:nth-
child(3
)        ul:hover li:nth-
child(4
)        ul:hover li:nth-
child(5
)<
/style>
<
/head>
<
/li>
<
/li>
<
/li>
<
/li>
<
/li>
<
/ul>
<
/body>
<
/html>

使用CSS3實現翻書效果（二）

原來一直使用qq直接登入的部落格，今天繫結了一下郵箱，原來的部落格全沒了，只好把原來備份的博文重新發了一下，還好只有兩篇 昨天把css3實現翻書樣式的效果實現了大半，今天將其主體的樣式全部實現了，下面將進行說明 我們仔細觀察書本的樣式發現書本底下是有陰影的，而且陰影可以隨著翻書的動作來移動，書皮的左...

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...