HTML5小教室:六款電子書翻頁特效

HTML5小教室:六款電子書翻頁特效
HTML5小教室:六款電子書翻頁特效

今天要來跟大家分享HTML5的翻頁特效!!需要的同學不要錯過了!!

1. HTML5 書本翻頁動畫特效

 

 
 

這是手動翻書頁面特效的基本款。這款 HTML5 翻頁動畫可以用鼠標拖動頁面來模擬手動翻頁的效果,也可以點擊書頁的邊框來快速翻頁。

▶網頁上展示

▶原始碼下載

2. HTML5 3D書本翻頁特效

 

 
 

利用 HTML5 和 CSS3 不但可以實現翻頁動畫,還可以 3D 的立體形式實現。下面這款書本翻頁特效,使用鼠標拖拽書本頁面即可翻動頁面,在翻頁的過程中,書本還可以呈現出3D立體的效果 – 包括書本中的圖片也是。

▶網頁上展示

▶原始碼下載

3. HTML5/CSS3書本翻頁3D動畫

 

 

另一種簡潔版書本3D動畫特效,當我們將鼠標滑過書本時,書本就會自動一頁頁翻過去,書本的3D效果非常鮮明、極簡舒服。

▶網頁上展示

▶原始碼下載

 

4.超逼真書本翻頁動畫(CSS3版)

 

 
 

這款 CSS3 動畫效果是模擬書本翻頁的動畫特效。當鼠標滑過書本右上角時,書本即可向前翻一頁,而且翻頁動畫非常逼真。由於 CSS3 的運用,我們並不需要使用複雜的圖片來製造逼真的書本效果,書本翻頁可以很簡單地完成。

▶網頁上展示

▶原始碼下載

5.超逼真書本翻頁動畫(jQuery版)

 

 
 

這款 jQuery 書本翻頁 3D 動畫,功能更加強大,支援頁數不限,並且也有非常逼真美觀的視覺效果。書本的內容支持所有的 HTML 元素,彈性高、強大好用。

▶網頁上展示

▶原始碼下載

6.jQuery/CSS3書本翻頁動畫特效

 

 

這是一款基於 jQuery 和 CSS3 的書本翻頁動畫特效,外觀清新、還有指示便於操作。除了典籍滑鼠來翻頁之外,我們還可以直接點擊左右按鈕進行翻頁。

▶網頁上展示

▶原始碼下載

 

 

更多關於HTML5的相關文章請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

Python vs R語言:哪個比較適合人工智慧/機器學習?

人工智慧釀酒超越人類 全球首支AI威士忌勇奪金牌

捷克新創Resistant.AI 開發2產品 揪出欺騙人工智慧的詭計

AI 人工智慧、ML 機器學習、深度學習、Python 是什麼?

有關Python的大小問題通通在這裡!!

時下最夯程式語言之一的Python和人工智慧有密不可分關係?!

一張圖秒懂Python,人工智慧和機器學習之間的關係!!

前端工程師CSS入門教程-Box Model盒子模式

前端工程師來說,CSS盒子模式Box Model可描述一個元素的組成,是個很重要的觀念.以下是盒子模式的式樣-

前端工程師CSS入門教學-Box Model盒子模式
對前端工程師來說,CSS盒子模式Box Model可描述一個元素的組成,是個很重要的觀念.以下是盒子模式的式樣

在盒子模式中,內容 (content) 是最內層的部分,接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。

相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下:

目錄
1. 邊界 (margin)
2. 邊框 (border)
3. 留白 (padding)

邊界

如我們在盒子模式那一頁看到的,邊界 (margin) 是在邊框之外,並且是用來設定各個元素之間的距離。一個盒子有四個邊,所以前端工程師們可以對這四個邊逐一設定:

  1. margin-top (上邊界)
  2. margin-right (右邊界)
  3. margin-bottom (下邊界)
  4. margin-left (左邊界)

有三種方式可以設定邊界,分別為長度、百分比、以及 ‘auto’。我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼):

See the Pen Margin by Tedutw (@Tedutw) on CodePen.

在這裡,上邊界為 50px,左邊界和右邊界為 10%,下邊界為 auto。

這樣寫會不會太麻煩一些? 會!其實前端工程師常將定義邊界尺寸的四行 CSS 碼濃縮成一行!以下會介紹:

Margin 邊界簡化 (一行文) 表示法

所有四個邊的邊界可以同時由一個 margin 屬性設定,只有一行文。它的語法如下:

margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]

我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼):

See the Pen Margin-2 by Tedutw (@Tedutw) on CodePen.

在這裡,邊界的表現跟最前面的例子一樣:上邊界為 50px,左邊界和右邊界為 10%,下邊界為 auto。

使用這種簡化的表示方法,重點在於數字的順序:第一個值是上邊界的值,第二個值是右邊界的值,第三個值是下邊界的值,而第四個值是左邊界的值。

這種簡化 CSS 的一行文標示方法,還有其他的方式,介紹如下:

margin:上 右 下 左; (四個值)

如上方例子所示

margin:上 左右 下; (三個值)

margin: [上面邊界值] [右邊與左邊邊界值] [下面邊界值] 

See the Pen margin:上 左右 下; (三個值) by Tedutw (@Tedutw) on CodePen.

margin:上下 左右; (二個值)

margin: [上面與下面邊界值] [右邊與左邊邊界值] 

See the Pen margin:上下 左右; (二個值) by Tedutw (@Tedutw) on CodePen.

margin:上下左右; (一個值)

margin: [上下左右邊界值] 

See the Pen margin:上下左右 (一個值) by Tedutw (@Tedutw) on CodePen.

邊框

Border 是邊框,介於外側的邊界 (margin) 與內側的留白 (padding) 之間。不須特別設定,CSS 碼如下:

border: 邊界值 實線或是虛線 顏色;

邊框設定範例如下:

border: 1px solid #000000;

See the Pen margin:上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.

如以上範例,我們得到一個外層包了一層黑色 (色碼為 #000000) 實線 (solid)、寬度1px的框。 border的數值只需要用空格分開即可,屬性不需要一個一個下,如:border-width、border-style、border-color 等等。

留白

padding(留白)外側緊鄰邊框 (border)、內側緊鄰內容 (content)。如果沒有設定 padding,內容的部分就會黏著邊框。padding 就會吃到背景色。

以下是沒有設定 padding 的例子,可以看見內容的字緊鄰黑色的邊框

See the Pen 沒有設定 padding 的例子 by Tedutw (@Tedutw) on CodePen.

以下是有設定 padding 的例子, 可以看見內容的字與邊框有一段距離.這一段距離就是所謂的「padding」。padding會吃到背景色。

See the Pen margin:上 左右 下; (三個值)-加上邊框 by Tedutw (@Tedutw) on CodePen.

Padding 的上下左右調整,語法跟 Margin 一樣,順序很重要。列舉如下:

padding:[上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
padding:[上面留白值] [左邊與右邊留白值] [下面留白值]
padding:[上面與下面留白值] [左邊與右邊留白值] 
padding:[上面與下面與左邊與右邊留白值] 

【其他相關 CSS 教學】

前端工程師專屬小課:CSS中常見的邊框屬性解釋

前端工程師的專屬小課:CSS字體單位解釋(下)

前端工程師的專屬小課:CSS字體單位解釋(上)

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

前端工程師必備的基礎”CSS的語法格式”

學用CSS做邊框一點都不難!前端工程師看過來呦!

前端工程師的第一堂課:CSS和HTML