注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0)类似翻书效果,原本的意思是使用JS来控制的,点击一次之后使用setInterval去控制书页翻过去的动 ...
注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写
先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0)
类似翻书效果,原本的意思是使用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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。