CSS3实现3D翻书效果

作者：佚名字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含css3实现3d效果,css3实现倒影效果,纯css3实现烟花效果,css3实现动画效果,css3 3d效果等相关知识,佚名希望在学习及工作中可以帮助到您

先上效果图：（样式有点丑，可以忽略一下下，效果出来了就好，后期加到其他项目中方便更改0.0）

类似翻书效果，原本的意思是使用JS来控制的，点击一次之后使用setInterval去控制书页翻过去的动画，当书页翻转180°之后，清除掉setInterval，但当我连续点击，那之前没有翻转180°的书页将无法继续完成之前的动作，可以用清除setInterval的方式，但总感觉动画效果不好，当然还有其他解决办法，但突然想到，CSS3为我们提供了animation，我们为什么不去使用使用呢，只要为加上animation动画就可以直接避免这个问题，animation动画默认是每次都执行完动画，所以，当出现连点的时候，就会像图中看到的那样，每一页都自然翻页，下面贴上代码，及实现步骤：
注：本实例JS部分均以原生JS编写，不善用原生JS的，可用jQuery等对三方框架改写
html部分：（这部分真心·····，算了，丑就丑点吧~.~）

</div>

<body>
<div class="book">
<div class="page">
<span>1</span>
<span>2</span>
</div>
<div class="page">
<span>3</span>
<span>4</span>
</div>
<div class="page">
<span>5</span>
<span>6</span>
</div>
<div class="page">
<span>7</span>
<span>8</span>
</div>
<div class="page">
<span>9</span>
<span>10</span>
</div>
<div

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

2017-06-02CSS3实现各种图形的示例代码
2017-06-02多重CSS背景动画实现方法示例
2017-06-02利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017-06-02CSS3 Media Queries详细介绍和使用实例
2017-06-02CSS3 伪类选择器 nth-child()说明
2017-06-02CSS实现的一闪而过的图片闪光效果
2017-06-02CSS的background属性及CSS3的背景图片设置总结
2017-06-02一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2017-06-02利用纯CSS3实现动态的自行车特效源码
2017-06-02解决CSS3的opacity属性带来的层叠顺序问题

CSS3实现3D翻书效果

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

相关文章

文章分类

最近更新的内容