使用CSS实现书籍的翻页效果(使用了animation)

最新推荐文章于 2024-07-25 08:14:42 发布

周万宁.FoBJ

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量1.8k

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/Angel_Tears_/article/details/130091539

版权

我的思路是 @keyframes 定义动画的起始状态和结束状态; 使用 transition 来实现中间的动画效果;

要注意的是父盒子要开启3d, 并且要调整视距; 还要注意旋转的角度以及起始位置; 最后要注意的是使用backface-visiblity: hidden 让翻转到反面的元素不显示

废话不多说,直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }

    .book{
      width: 300px;
      margin: 100px auto; /*居中*/
      position: relative;/*开启相对定位*/
      perspective: 1500px; /*视距*/
      transform-style: preserve-3d;/*开启3d*/
      transform: rotateX(10deg); /*向下旋转一些*/
    }
    li{
      position: absolute;/*开启绝对定位*/
      font-size: 20px;
      /*依据图片的分辨率而设*/
      width: 300px;
      height: 400px;
      box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.1); /*向内设置阴影*/
      backface-visibility: hidden;   /*使得翻转到反面时不显示*/
      transition: transform 6s linear;/*过渡效果*/
    }
    .cover{
      background: linear-gradient(to left top,maroon,lightcoral);
      z-index: 0;/*显示*/
      transform-origin: left center;/*设置transform中心点*/
      animation: coverAnimate infinite 6s linear; /*动画, 重复, 时间, 速度曲线*/
    }
    .page1{
      background: linear-gradient(to left top,greenyellow,orange);
      left: -300px; /*向左移动-300px*/
      z-index: -1;
      transform-origin: right center;
      transform: rotateY(180deg); /*旋转180度*/
      animation: page1Animate infinite 6s linear;
    }
    .page2{
      background: linear-gradient(to left top,deeppink,red);
      z-index: -2;
    }

/*    .book:hover .cover{
      transform: rotateY(-180deg);
    }
    .book:hover .page1{
      transform: rotateY(0deg);
    }*/

    @keyframes coverAnimate { /*定义动画*/
      0%{ /*其实状态*/
        transform: rotateY(0deg);
      }

      100%{/*最终状态*/
        transform: rotateY(-180deg);
      }
    }

    @keyframes page1Animate {
      0%{
        transform: rotateY(180deg);
      }
      100%{
        transform: rotateY(-0deg);
      }
    }

  </style>
</head>
<body>

<ul class="book">
  <li class="cover">第一页</li>
  <li class="page1">第二页</li>
  <li class="page2">第三页</li>
</ul>


</body>
</html>

周万宁.FoBJ

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用CSS实现书籍的翻页效果(使用了animation)

要注意的是父盒子要开启3d, 并且要调整视距;还要注意旋转的角度以及起始位置;定义动画的起始状态和结束状态;让翻转到反面的元素不显示。来实现中间的动画效果;废话不多说,直接上代码。
复制链接

扫一扫