1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>一本书</title>
5 <meta http-equiv="refresh" content="999">
6 <style type="text/css">
7 body {background-color: #ccc;-webkit-perspective: 10px;}
8 * {padding: 0;margin: 0;box-sizing: border-box;}
9 ul {list-style: none;transform-style: preserve-3d;}
10 .book {width: 200px;height: 300px;background-color: #FFF;margin: 100px auto;position: relative;perspective: 1000px;}
11 ul {width: 100%;height: 100%;background-color: #666;position: absolute;animation: 5s inks ;animation-fill-mode: forwards;}
12
13 li {width: 100%;height: 100%;background-color: #777;position: absolute;z-index: 2; animation: 10s ink 5s;animation-direction:alternate; }
14 @keyframes ink {
15 0% {transform-origin: left;transform: rotate3d(0,0,0,0);}
16 100% {transform-origin: left;transform: rotate3d(0,1,0,-180deg);}
17 }
18 li:nth-child(1) { animation-delay: 5.2s;}
19 li:nth-child(2) { animation-delay: 6s;}
20 li:nth-child(3) { animation-delay: 7s;}
21 li:nth-child(4) { animation-delay: 8s;}
22 li:nth-child(5) { animation-delay: 9s;}
23 li:nth-child(6) { animation-delay: 10s;}
24 /* @keyframes inks {
25 0% {transform: scale(2);}
26 100% {transform: rotate3d(1,0,0,45deg);}
27 }*/
28 </style>
29 </head>
30 <body>
31 <div class="book">
32
33 <ul>
34 <li style="z-index: 99;">你好</li>
35 <li>bug</li>
36 <li>借过</li>
37 <li>这个</li>
38 <li>噶尔么</li>
39 <li>哈哈</li>
40 </ul>
41 </div>
42 </body>
43 </html>