翻页动画效果

Question

我需要翻动动画效果加载屏幕的书页。 我创建了一个转弯，我需要连续转弯如何使书本像装书一样。

我要实现此页面翻书效果。 用于加载屏幕。

翻一页后需要添加新的翻页

 .cssload-thecube { width: 96px; height: 69px; margin: 0 auto; margin-top: 49px; position: relative; background-color: #000; } .cssload { width: 73px; height: 73px; margin: 0 auto; margin-top: 49px; position: relative; background-color: rgb(43,160,199); } .cssload-thecube .cssload-cube { position: relative; } .cssload-thecube .cssload-cube { float: left; width: 50%; height: 50%; position: relative; transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); } .cssload-thecube .cssload-cube:before { content: ""; position: absolute; top: -36px; left: 15px; width: 100%; height: 100%; background-color: rgb(43,160,199); animation: cssload-fold-thecube 2.76s infinite linear both; -o-animation: cssload-fold-thecube 2.76s infinite linear both; -ms-animation: cssload-fold-thecube 2.76s infinite linear both; -webkit-animation: cssload-fold-thecube 2.76s infinite linear both; -moz-animation: cssload-fold-thecube 2.76s infinite linear both; transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; } .cssload-thecube .cssload-c2 { transform: scale(1.1) rotateZ(90deg); -o-transform: scale(1.1) rotateZ(90deg); -ms-transform: scale(1.1) rotateZ(90deg); -webkit-transform: scale(1.1) rotateZ(90deg); -moz-transform: scale(1.1) rotateZ(90deg); } @keyframes cssload-fold-thecube { 0%, 50% { transform: perspective(-180deg) rotateX(-136px); opacity: 0; } 50%, 100% { transform: perspective(136px) rotateX(-180deg); opacity: 1; } } 

 <div class="cssload-thecube"> <div class="cssload-cube cssload-c2"></div> </div> 

Answer 1

@keyframes cssload-fold-thecube {
  0%, 50% {
    transform: perspective(-180deg) rotateX(-136px);
    opacity: 0;
  }
  50%,
  100% {
    transform: perspective(136px) rotateX(-180deg);
    opacity: 1;
  }
}