实现微信翻页效果

最新推荐文章于 2023-04-10 11:12:41 发布

yinbucheng

最新推荐文章于 2023-04-10 11:12:41 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/yinbucheng/article/details/51444645

版权

这篇博客介绍了一种实现微信翻页效果的方法，通过叠加图片并利用CSS动画和JavaScript来创建翻页动画。文章详细展示了HTML结构、CSS样式和JavaScript事件处理，包括触摸事件来响应上下翻页操作。

摘要由CSDN通过智能技术生成

其主要思想就是相当于图片的叠加，上面的图片会覆盖下面的如果想看下面的只需把上面的移调

<body>
   <div class="pageBox">

       <div class="page page1">
          <img class="bg" src="img/150639.jpg"/>
          <p class='text1 leftIn animationDelay5000ms' >世界那么大~</p>
          <p class='text2 leftIn animationDelay7000ms'>我想去看看</p>
          <img class='img1 leftIn animationDelay9000ms' src="img/151216.jpg"/>
       </div>

       <div class="page page2 hidden">
          <div><img src="img/2 (1).jpg" class="img2 pic2"/></div>
          <div class="text1 text11">旅行的意义</div>
          <span class="text2 text22" style="width: 600px;"></br>          为了走某个人走过的路</br>     看某个人看过的风景!</span>
       </div>

       <div class="page page3 hidden">
          <img src="img/2 (2).jpg" class="img1 pimg1"/>
          <im