CSS3 實現翻書效果

2021-10-12 19:43:07 字數 1376 閱讀 6264

body


ulul li
一般3d層給實現3d效果的父盒子，視距給最大的盒子body。

在給子元素設定旋轉角度過程中，使用偽類選擇器可以減少記憶體的占用，這裡使用到: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


)
最後為了實現書頁每頁翻動時有延時間隔，使用過度屬性transition實現過度動畫效果。（transition:transition-property(過度屬性) transition-duration(過度時間) transition-timing-function(動畫型別) transition-delay(延時時間)，例如transition:all 2s linear .5s;的意思是所有元素動畫延時0.5秒以線性效果2秒完成）

完整**如下：

<


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