一本书css3待修复 

 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>

 

posted @ 2021-01-20 21:23  inks  阅读(46)  评论(0)    收藏  举报