您现在的位置是：网站首页> 编程资料编程资料

很酷的HTML5电子书翻页动画特效css transform 翻页动画记录的实现HTML5 3D书本翻页动画的实现示例使用纯CSS实现书籍3D翻页效果的示例一个不错的html 打印代码支持翻页css实现点击滚动翻页的效果(无js)css3实现书本翻页效果的示例代码

2021-08-31 991人已围观

简介这篇文章主要介绍了很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页，感兴趣的小伙伴们可以参考一下

本文分享一款很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效，3D视觉效果更加强烈。

在线演示地址如下：

实现的代码：

XML/HTML Code复制内容到剪贴板

<div id="shineflip">
<div id="shineflip-pages">
<canvas id="shineflip-canvas">canvas>
<canvas id="shineflip-page-mid-canvas">canvas>
<section class="page">
<div><img src="images/0.jpg" width="475" height="482" />div>
<span style="left:18px;"><img src="images/zh.png" height="482" />span>
section>
<section class="page" style="background:url(images/left_pk.jpg)">
<div><img src="images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" />div>
section>
<section class="page">
<div><img src="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" />div>
section>
<section class="page">
<div><img src="images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" />div>
section>
<section class="page">
<div><img src="images/4.jpg" width="466" height="463" style="float:left;margin-top:9px;" />div>
section>
<section class="page">
<div><img src="images/5.jpg" width="466" height="463" style="float:right;margin-top:9px;" />div>
section>
<section class="page" style="background:url(images/right_pk.jpg)">
<div><img src="images/6.jpg" width="466" height="463" style="float:left;margin-top:9px;" />div>
section>
<section class="page">
<div><img src="images/24.jpg" width="475" height="482" />div>
<span style="right:18px;"><img src="images/zh.png" height="482" />span>
section>
div>
div>

CSS样式：

CSS Code复制内容到剪贴板