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

作者：羊村懒王 | 2024-02-19 22:46:00

踩

css书本翻页效果

我的思路是 @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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/117151