• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 关于6个超炫酷的HTML5电子书翻页动画的详情

关于6个超炫酷的HTML5电子书翻页动画的详情

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,电子书,翻页动画等相关知识,匿名希望在学习及工作中可以帮助到您

相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容。今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的朋友可以下载使用。

1、jQuery书本翻页3D动画特效

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

jquery-3d-book-page

在线演示 源码下载

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

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

css3-page-flip

在线演示 源码下载

3、HTML5电子书翻页动画特效

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

html5-book-page

在线演示 源码下载

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

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

html5-3d-book

在线演示 源码下载

5、HTML5/CSS3书本翻页3D动画

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

html5-css3-book

在线演示 源码下载

6、jQuery/CSS3书本翻页动画特效

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

在线演示 源码下载

以上就是关于6个超炫酷的HTML5电子书翻页动画的详情的内容,更多相关内容请关注微课江湖()!


您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03H5各种头部meta标签的功能示例代码分析
  • 2017-08-06实例讲解HTML5的meta标签的一些应用
  • 2018-12-03HTML5通过调用canvas对象的getContext()方法来获取绘图环境_html5教程技巧
  • 2018-12-03Html5的学习之旅-Html5的web Storage概述(16)
  • 2018-12-03使用HTML5进行SVG矢量图形绘制的入门教程_html5教程技巧
  • 2018-12-03H5响应式网站设计有什么要求?
  • 2018-12-03关于H5调用相机拍照并压缩图片的代码
  • 2018-12-03无需Flash录视频——HTML5中级进阶
  • 2018-12-03html5和css3 动态气泡按钮的实现
  • 2017-08-06逼真的HTML5树叶飘落动画

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用html5制作loading图的示例_html5教程技巧
    • HTML5 Canvas之测试浏览器是否支持Canvas的方法
    • content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计?
    • html5中canvas学习笔记1-画板的尺寸与实际显示尺寸_html5教程技巧
    • HTML页面中添加Canvas标签示例
    • 「W3C HTML5 中文兴趣小组」是个什么样的小组?
    • 详解HTML5中的manifest缓存使用
    • HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
    • 全面解析HTML5的文档结构和新增标签
    • 如何使用HTML5 File接口在web页面上使用文件下载

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有