如何用html5实现翻书的动画效果

最新推荐文章于 2025-05-05 12:33:46 发布

winneryy

最新推荐文章于 2025-05-05 12:33:46 发布

阅读量2k

点赞数 2

分类专栏： web前端文章标签： html5 css

本文链接：https://blog.youkuaiyun.com/winneryy/article/details/109493305

版权

web前端专栏收录该内容

30 篇文章

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  *{
                                     margin:0;
                                      padding:0;
                                      } 
  ul{
                                    list-style:none;
                                    }
                                  .text{
                                      width:150px;
                                      height:220px;
                                        margin:200px;
                                       position:relative;
                                        perspective:500px;
                                       transform-style:preserve-3d;
                                   }
                                    .text  li{
                                          width:100%;
                                          height:100%;
                                            position:absolute;
                                          left:0;
                                           top:0;
                                           background:liner-gradient(to  right,white,pink);
                                            border:1px  solid  lightgray;
                                             border-radius:0  5px  5px  0;
                                          transform-origin:left;
                                           transition:5s;
                                             box-shadow:0  5px  5px  lightgray;
                                               background-color:#FF99CC;
 
                                      }
                                    .text  li:nth-of-type(1){
                                        transform:rotateY(-28deg);
                                     }
                                         .text  li:nth-of-type(2){
                                        transform:rotateY(-26deg);
                                     }
                                       .text  li:nth-of-type(3){
                                        transform:rotateY(-24deg);
                                     }
                                       .text  li:nth-of-type(4){
                                        transform:rotateY(-22deg);
                                     }
                                       .text  li:nth-of-type(5){
                                        transform:rotateY(-20deg);
                                     }
                                       .text:hover  li:nth-of-type(1){
                                                    transform:rotateY(-160deg);
                                                    transition:1s;
                                     }
                                         .text:hover  li:nth-of-type(2){
                                                    transform:rotateY(-150deg);
                                                    transition:1.3s;
                                     }
                                       .text:hover  li:nth-of-type(3){
                                                    transform:rotateY(-140deg);
                                                    transition:1.6s;
                                     }
                                       .text:hover  li:nth-of-type(4){
                                                    transform:rotateY(-130deg);
                                                    transition:1.9s;
                                   }           
  </style>
 </head>
 <ul   class="text">
                       <li></li>   
                        <li></li>
                       <li></li>
                        <li></li>
                         <li  style="line-height:220px;">Web前端开发技术</li>
                    </ul>
  
 <body>
 </body>
</html>