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

/* 定义书籍的基本样式 */
.book {
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 1000px;
}
 
/* 定义书页的基本样式 */
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #FFF;
  backface-visibility: hidden;
  transition: transform 1s;
}
 
/* 定义书籍翻转时的样式 */
.book:hover .page {
  transform: rotateY(180deg);
}
 
/* 定义书页背面的样式 */
.page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  backface-visibility: visible;
  transform: rotateY(180deg);
}
 
/* 定义书籍翻转动画 */
@keyframes flip {
  0% {
    transform: perspective(1000px) rotateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(1000px) translateZ(150px) rotateY(100deg);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: perspective(1000px) translateZ(150px) rotateY(190deg);
    animation-timing-function: ease-in-out;
  }
  60% {
    transform: perspective(1000px) translateZ(150px) rotateY(360deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
    animation-timing-function: ease-out;
  }
}
 
/* 应用翻转动画 */
.book:hover .page {
  animation: flip 1s infinite;
}

这段代码定义了一个简单的书籍翻页效果，当鼠标悬停在书籍上时，书页会执行翻转动画。动画使用了CSS3的@keyframes规则来定义流畅的翻页动画效果。这个例子展示了如何结合使用transform和animation属性来创建复杂的动画效果。