收藏
回答

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

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

回答关注问题邀请回答
收藏

2 个回答

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

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

    2019-07-23
    有用
    回复
  • 胖丫么胖
    胖丫么胖
    2019-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>


    2019-03-11
    有用
    回复 3
    • 胖丫么胖
      胖丫么胖
      2019-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);
              }
          }


      2019-03-11
      回复
    • 静享华年
      静享华年
      2019-03-11回复胖丫么胖

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

      2019-03-11
      回复
    • 果果
      果果
      01-02回复静享华年
      弱弱的问下,实现了吗?求指教
      01-02
      回复
登录 后发表内容