你的位置:首页 > 软件开发 > 网页设计 > 基于CSS3新属性Animation及transform实现类似翻书效果

基于CSS3新属性Animation及transform实现类似翻书效果

发布时间:2016-06-19 19:00:05
注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0)类似翻书效果,原本的意思是使用JS来控制的,点击一次之后使用setInterval去控制书页翻过去的动 ...

注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写

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

基于CSS3新属性Animation及transform实现类似翻书效果

类似翻书效果,原本的意思是使用JS来控制的,点击一次之后使用setInterval去控制书页翻过去的动画,当书页翻转180°之后,清除掉setInterval,但当我连续点击,那之前没有翻转180°的书页将无法继续完成之前的动作,可以用清除setInterval的方式,但总感觉动画效果不好,当然还有其他解决办法,但突然想到,CSS3为我们提供了animation,我们为什么不去使用使用呢,只要为加上animation动画就可以直接避免这个问题,animation动画默认是每次都执行完动画,所以,当出现连点的时候,就会像图中看到的那样,每一页都自然翻页,下面贴上代码,及实现步骤:

html部分:(这部分真心·····,算了,丑就丑点吧~.~)

<body>  <!-- 所展示的书的内容 -->  <div >    <div >      <span>1</span>      <span>2</span>    </div>    <div >      <span>3</span>      <span>4</span>    </div>    <div >      <span>5</span>      <span>6</span>    </div>    <div >      <span>7</span>      <span>8</span>    </div>    <div >      <span>9</span>      <span>10</span>    </div>    <div >      <span>11</span>      <span>12</span>    </div>    <div >      <span>13</span>      <span>14</span>    </div>    <div >      <span>15</span>      <span>16</span>    </div>    <div >      <span>17</span>      <span>18</span>    </div>    <div >      <span>19</span>      <span>20</span>    </div>  </div>  <!-- 用来控制上一页和下一页操作 -->  <input type="button" value="上一页" id="before"/>  <input type="button" value="下一页" id="after"/></body>

原标题:基于CSS3新属性Animation及transform实现类似翻书效果

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。