📖📖📖翻书可以比翻脸还快

前言

有位不愿透露姓名的退役前端(卖麻辣烫去了)对我说过，"前端画页面的时候像建筑工人。按照图纸铺铺砖、装装门窗、刷刷漆"。我静静看着他，不说话。他指着我电脑上的一个gif图，"不信？我给你来一套组合拳"

上图

纯纯的html+css画一下这个gif图吧

建筑工人开工

搬砖

gif图是一个翻书的效果，翻书首先得有书吧，先把书的结构办了

html 复制代码

<!-- 书本 -->
<div class="book-box">  
  <!-- 书皮 -->
  <span class="book-cover"></span>
  <!-- 书页 -->
  <span class="book-page"></span>
  <!-- 书皮 -->
  <span class="book-cover"></span>
</div>

刷漆

结构有了，再刷点漆，来点css

css 复制代码

.book-box {
  position: relative;
  width: 296px;
  height: 200px;
}
.book-cover {
  background-color: #977245;
  transform: rotateY(0deg);
  width: 148px;
  height: 200px;
}
.book-page {
  background-color: #e9e6c4;
  width: 144px;
  height: 192px;
}
.book-cover, .book-page {
  position: absolute;
  display: inline-block;
  transform-origin: 100% 0;
  box-sizing: border-box;
  border-radius: 5px 0 0 5px;
  box-shadow: inset 4px 0px 20px rgba(0, 0, 0, 0.15),
    0px 0px 16px rgba(0, 0, 0, 0.05);
}

这样一来，一本书就画好了，通过3D视图简单看一下结构，两片书皮夹着一片书页的

动起来

从需求中的gif图看到，书本的一边书皮和书页是有翻动效果的，给他加点动效

css 复制代码

/* 给需要动效的书皮的class加上turn */
.book-cover.turn {
  animation: bookCover 3s;
}
@keyframes bookCover {
  40% { z-index: 100 }
  100% {  transform: rotateY(180deg);
    z-index: 1;}
}

嗯。。。有点东西了，但是和gif图的上的还差点书页呢，加点页数吧

加量不加价

html 复制代码

<!-- 书本 -->
<div class="book-box">  
  <!-- 书皮 -->
  <span class="book-cover"></span>
  <!-- 书页 -->
  <span class="book-page"></span>
  <span class="book-page turn"></span>
  <span class="book-page turn"></span>
  <span class="book-page turn"></span>
  <span class="book-page turn"></span>
  <span class="book-page turn"></span>
  <!-- 书皮 -->
  <span class="book-cover turn"></span>
</div>

给书页加上阴影，动起来增加一些翻页视觉效果

css 复制代码

.book-page {
    box-shadow: inset 2px 0px 20px rgba(0, 0, 0, 0.2),
    0px 0px 15px rgba(0, 0, 0, 0.1);
}

页数多起来了，还得让书页都动起来，并且要有不同的翻页角度效果，翻页的时间差

css 复制代码

.book-page:nth-of-type(1) {
  animation-delay: 0.05s;
}
.book-page:nth-of-type(2) {
  animation-delay: 0.3s
}
.book-page:nth-of-type(3) {
  animation-delay: 0.6s;
}
.book-page:nth-of-type(4) {
  animation: bookOpen150deg 3s forwards;
  animation-delay: 1s;
}
.book-page:nth-of-type(5) {
  animation: bookOpen30deg 3s forwards;
  animation-delay: 1.1s;
}
.book-page:nth-of-type(6) {
  animation: bookOpen55deg 3s forwards;
  animation-delay: 1.2s;
}
@keyframes bookOpen {
  30% { z-index: 999 }
  100% {  transform: rotateY(180deg);
    z-index: 999;}
}
@keyframes bookCover {
  30% { z-index: 999 }
  100% {  transform: rotateY(180deg);
    z-index: 1;}
}
@keyframes bookOpen30deg {
  50% { z-index: 999 }
  100% {  transform: rotateY(30deg);
    z-index: 999;}
}
@keyframes bookOpen55deg {
  30% { z-index: 999 }
  100% {  transform: rotateY(55deg);
    z-index: 999;}
}
@keyframes bookOpen150deg {
  30% { z-index: 999 }
  100% {  transform: rotateY(150deg);
    z-index: 999;}
}

最终效果

完整代码

html 复制代码

<div class="book-box">
  <span class="book-page turn"></span>
  <span class="book-page turn"></span>
  <span class="book-page turn"></span>
  <span class="book-page turn"></span>
  <span class="book-page turn"></span>
  <span class="book-page turn"></span>
  <span class="book-cover"></span>
  <span class="book-page"></span>
  <span class="book-cover turn"></span>
</div>
<style>
body {
/*  background-color: #4F4E68;*/
padding-top: 200px;
}
.book-box {
  position: relative;
  margin: auto;
  width: 296px;
  height: 200px;
  perspective: 1000px;
}
.book-cover {
  background-color: #977245;
  transform: rotateY(0deg);
  width: 148px;
  height: 200px;
}
.book-page {
  background-color: #e9e6c4;
  transform: rotateY(0deg);
  width: 144px;
  height: 192px;
  text-align: center;
  font-size: 16px;
  color: #777;
}
.book-cover, .book-page {
  position: absolute;
  transform-origin: 100% 0;
  border-radius: 5px 0 0 5px;
  box-shadow: inset 3px 0px 20px rgba(0, 0, 0, 0.2),
    0px 0px 15px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.book-cover.turn {
  animation: bookCover 3s forwards;
}
.book-page.turn {
  animation: bookOpen 3s forwards;
}
.book-page:nth-of-type(1) {
  animation-delay: 0.05s;
}
.book-page:nth-of-type(2) {
  animation-delay: 0.3s
}
.book-page:nth-of-type(3) {
  animation-delay: 0.6s;
}
.book-page:nth-of-type(4) {
  animation: bookOpen150deg 3s forwards;
  animation-delay: 1s;
}
.book-page:nth-of-type(5) {
  animation: bookOpen30deg 3s forwards;
  animation-delay: 1.1s;
}
.book-page:nth-of-type(6) {
  animation: bookOpen55deg 3s forwards;
  animation-delay: 1.2s;
}
@keyframes bookOpen {
  30% { z-index: 999 }
  100% {  transform: rotateY(180deg);
    z-index: 999;}
}
@keyframes bookCover {
  30% { z-index: 999 }
  100% {  transform: rotateY(180deg);
    z-index: 1;}
}
@keyframes bookOpen150deg {
  30% { z-index: 999 }
  100% {  transform: rotateY(150deg);
    z-index: 999;}
}
@keyframes bookOpen55deg {
  30% { z-index: 999 }
  100% {  transform: rotateY(55deg);
    z-index: 999;}
}
@keyframes bookOpen30deg {
  50% { z-index: 999 }
  100% {  transform: rotateY(30deg);
    z-index: 999;}
}
</style>

最后

这位位不愿透露姓名的前端神伸懒腰，说："搞完了，咋样？这翻书的效果可不必你翻脸快？我回去卖麻辣烫了"

我投向了羡慕的眼光。倒不是羡慕他搞出这种效果了，而是羡慕无忧无虑开始卖麻辣烫了