千峰逆戰班停課不停學,3周學習實現3D翻書效果

2021-10-03 03:26:45 字數 1233 閱讀 4688

首先,確定一下要寫一本幾頁的書,頁數自定義,然後寫乙個盒子(整本書),書裡面包含單頁,我們用列表來做,**如下:

接下來開始寫它的css樣式。首先,我們要給html中的**去掉預設樣式,例如列表符號等,接著給這個整體的盒子,也就是這本書確定乙個寬高,然後在頁面居中,由於盒子裡面書的單頁是固定在裡面的,所以我們要給這個整體的盒子加乙個相對定位,然後加乙個3d的效果,**如下:

接下來,給書裡邊的單頁li,設定它的寬高,因為和盒子是乙個整體,所以它的寬高跟隨父容器,絕對定位在父容器中,然後可以給這本書整體設定乙個顏色,可以做成漸變的,視覺效果比較好,再給他加上乙個邊框。咱們平時看書呢都知道,厚一點的書它的右上角和右下角不是直接的直角的,帶點圓,所以我們給這個盒子的右上角和右下角可以加一點圓角,值據視角而定。為了讓看起來有錯落的層次感,可以讓盒子整體沿y軸像外稍微旋轉乙個適當的角度,再給這本書讓它翻頁的時候有乙個基點,沿著這個點翻轉。**如下:

效果圖如下:

最後,咱們可以通過hover標籤和偽類,讓這本書滑鼠移上去實現自動翻頁,上面咱們寫了書翻頁時起點的角度,現在咱們給他寫一下書翻頁之後應該落在哪個角度,這裡要注意的是,通常咱們看書,看到最後一頁就沒有單頁再往後翻了,所以咱們的最後一頁不需要給它寫翻頁之後的角度,這個角度寫0 就可以了,然後再給每一頁後固定乙個翻頁時畫面持續的時間,盡量寫成錯落的,更真實,**如下:

效果一下:

最後一步呢,咱們滑鼠移上去的時候有乙個翻開的時間,也要給它設定乙個滑鼠移開後書自動合上的時間,咱們可以給書頁整體的寫乙個時間就可以啦。

這就是如何用css3 實現乙個翻書的3d效果。

千峰逆戰班,拼搏永向前

控制反轉ioc inversion of control 控制 控制的雙方是什麼?誰控制誰?主控方 spring 被控方 應用程式所使用的資源 原始 應用程式直接控制需要的外部資源 spring spring控制所需要的外部資源 反轉 什麼是反轉?反轉什麼?正向 應用程式直接呼叫資源 反向 應用程式...

千鋒逆戰班,作業3 16

3 對於fileinputstream來說,從方向上來分,他是輸入流,從資料單位上分,他是位元組流,從功能上分,他是節點流。4fileinputstream有三個過載的read方法,其中 無參的read方法返回值為int型別,表示單個位元組值。int read byte bs 方法返回值表示讀取到的...

千鋒逆戰班,陳強 在千鋒「逆戰」學習第 22天

string字串的常用方法 1.tostring 返回物件本身 2.substring 陣列的下標 返回乙個新的字串,它是此字串的乙個子字串。從括號定義的下標開始 3.touppercase 將字串中的字母全部變成大寫 4.tolawercase 將字串中的字母全部變成小寫 5.trim 去掉字串前...