【源码】6个超炫酷的HTML5电子书翻页动画

相信大家一定遇到过一些电子书网站，我们可以通过像看书一样翻页来浏览电子书的内容。今天我们要分享的HTML5应用跟电子书翻页有关，我们精选出来的6个电子书翻页动画都非常炫酷哦！

 

1

jQuery书本翻页3D动画特效

这款jQuery书本翻页3D动画功能更加强大，可以支持任意数量页的翻阅，并且也有非常美观的视觉效果。书本的内容支持任意HTML元素，相当灵活。

在线演示：http://www.html5tricks.com/demo/jquery-3d-book-page/index.html

源码下载：http://www.html5tricks.com/jquery-3d-book-page.html

2

CSS3书本翻页动画 书本翻页效果逼真

这一款炫酷而且实用的CSS3动画效果，它是模拟书本翻页的动画特效。当鼠标滑过书本右上角时，书本即可向前翻一页，而且翻页动画非常逼真。由于CSS3的运用，我们并不需要使用复杂的图片来制造逼真的书本效果，书本翻页可以很简单地完成。

在线演示：http://www.html5tricks.com/demo/css3-page-flip/index.html

源码下载：http://www.html5tricks.com/css3-page-flip.html

3

HTML5电子书翻页动画特效

这一款很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。

在线演示：http://www.html5tricks.com/demo/html5-book-page/index.html

源码下载：http://www.html5tricks.com/html5-book-page.html

4

HTML5 3D书本翻页特效 3D效果比较漂亮

利用HTML5和CSS3实现3D效果真的非常方便，下面这款书本翻页特效就很好地利用了HTML5的3D特性。鼠标拖拽书本页面即可翻动页面，在翻页的过程中整本书还呈现出3D立体的效果，包括书本中的图片也十分立体。

在线演示：http://www.html5tricks.com/demo/css3-3d-book/index.html

源码下载：http://www.html5tricks.com/html5-3d-book.html

5

HTML5/CSS3书本翻页3D动画

前段时间我们分享过很多牛叉的HTML5动画，如果你对HTML5感兴趣，可以移步至HTML5动画欣赏学习。今天我们要分享一款基于HTML5和CSS3的书本翻页3D动画，当我们将鼠标滑过书本时，书本就会自动一页页翻过去，书本的3D效果非常不错。

在线演示：http://www.html5tricks.com/demo/html5-css3-book/index.html

源码下载：http://www.html5tricks.com/html5-css3-book.html

6

jQuery/CSS3书本翻页动画特效

这是一款基于jQuery和CSS3的书本翻页动画特效，该书本翻页插件的外观非常华丽喜庆，非常适合产品活动或者育儿网站使用。我们可以点击左右翻页按钮进行翻页，也可以使用鼠标拖拽页脚来实现翻页动画。这是个jQuery插件，因此兼容性还不错。

在线演示：http://www.html5tricks.com/demo/jiaoben2304/index.html

源码下载：http://www.html5tricks.com/jquery-css3-book-flip.html

以上就是6款超炫酷的HTML5电子书翻页动画，希望你会喜欢。

---

---

本文转载自网络，欢迎大家分享阅读！