收藏
回答

微信小程序可以做仿电子书的翻页特效吗?

最近做个项目需要模仿电子书的翻页效果,我查看了好多阅读类的小程序都没有做这样的效果,找到了个翻页特效的插件turn.js但都是用jquery写的,小程序不支持用jquery啊,就为了做这么个特效难道要我把插件全部翻页成js?我内心是拒绝的啊,有没有大神能帮忙支招啊,谢谢

最后一次编辑于  03-11
回答关注问题邀请回答
收藏

2 个回答

  • 晨宇同学
    晨宇同学
    07-23

    问下作者写出来了吗??怎么实现的?正发愁,想提问,发现三月就有人问了~~

    07-23
    赞同
    回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    03-11

    可以尝试使用 css3 进行操作

    wxml

    <view class="book preserve-3d">
       <view class="now_page point">
           <view class="book-page">
              <text>第三页</text>
           </view>
       </view>
     
       <view class="now_page point">
           <viewv class="book-page">
              <text>第二页</text>
           </view>
       </view>
     
       <view class="now_page point">
           <view class="book-page ">
              <text>第一页</text>
           </view>
       </view>
     
     <!--封面-->
       <view class="point now_page">
            <view class="book-page first-page">
               <text>封面</text>
            </view>
       </view>
    </view>


    03-11
    赞同
    回复 2
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      03-11
      book{
              height10rem;
              width40%;
              background#FFF;
              positionabsolute;
              right:10%;
              top:400rpx;
              transform: rotateX(30deg);
          }
          /*每页的公共样式*/
          .book-page {
              positionabsolute;
              top0;
              left0;
              width100%;
              height:1000rpx;
              border1px solid #1976D2;
              text-aligncenter;
              background-color#fff;
          }
          .book-page p{
              font-size120rpx;
              margin-top200rpx;
              color#ff6300;
              backface-visibility:hidden;
          }
          /*首页样式*/
          .first-page{
              background-color#1976D2;
          }
           
          /*动画部分*/
          /*I'm the home page动画*/
          .flip-animation-start {
              animation: flipBook1 3s forwards;
          }
          .flip-animation-end {
              animation: flipBook2 3s forwards;
          }
          @keyframes flipBook1 {
              0% {
                  transform: rotateY(0deg);
              }
              100% {
                  transform: rotateY(-160deg);
              }
          }
          /*关闭书页*/
          @keyframes flipBook2 {
              0% {
                  transform: rotateY(-160deg);
              }
              100% {
                  transform: rotateY(0deg);
              }
          }


      03-11
      回复
    • 静享华年
      静享华年
      03-11回复仙森ღ₅₂₀¹³¹⁴

      谢谢,我试试,3Q,么么哒

      03-11
      回复