实现动态堆叠卡的效果

最新推荐文章于 2024-06-10 09:55:35 发布

一只喵，走走停停

最新推荐文章于 2024-06-10 09:55:35 发布

阅读量1k

点赞数 1

文章标签：动态堆叠卡

哈喽，小伙们！今晚我来给大家分享一个关于实现动态堆叠卡的效果，来源于一本名为Div+CSS3+jQuery 网页设计深度剖析的书。这里面也包括我对旋转角度进行的改动，让它看起来更自然。如果大家有更好的建议，欢迎在下方给我留言！

HTML部分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>动态堆叠卡</title>
       <link rel="stylesheet" type="text/css" href="css/index.css"/>
   </head>
   <body>
       <div id="card">
           <ul>
               <li id="one"><img src="img/one.jpg" width="130" height="130"/></li>
               <li id="two"><img src="img/one.jpg" width="130" height="130"/></li>
               <li id="three"><img src="img/one.jpg" width="130" height="130"/></li>
               <li id="four"><img src="img/one.jpg" width="130" height="130"/></li>
               <li id="five"><img src="img/one.jpg" width="130" height="130"/></li>
           </ul>
       </div>
   </body>
</html>

CSS部分

@charset "UTF-8";
*{
   margin: 0;
   padding: 0;
   text-decoration: none;
}

#card li{
   display: block;
   position: relative;
   list-style-type: none;
   width: 130px;
   height: 350px;
   background-color: #963;
   border: 2px dashed #FF6600;
   padding: 25px 9px;
   margin-bottom: 60px;
   float: left;
   border-radius:10px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   box-shadow: 2px 2px 10px #000;
   -moz-box-shadow: 2px 2px 10px #000;
   -webkit-box-shadow: 2px 2px 10px #000;
   transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -webkit-transition: all 0.5s ease-in-out;
}

/*#card h3{
   font-size: 24px;
   font-weight: bold;
   color: #FFF;
   line-height: 40px;
}

#card p{
   margin-top: 20px;
   text-align: left;
   color: #FFF;

}*/

#card img{
   margin-top: 20px;
   background-color: #FFF;
   border-radius:6px;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   box-shadow: 0px 0px 5px #666;
   -moz-box-shadow: 0px 0px 5px #666;
   -webkit-box-shadow: 0px 0px 5px #666;
}

#one{
   z-index: 1;
   left: 150px;
   top: 40px;
   transform: rotate(-20deg);
   -moz-transform: rotate(-20deg);
   -webkit-transform: rotate(-20deg);
}

#two{
   z-index: 2;
   left: 70px;
   top: 10px;
   transform: rotate(-10deg);
   -moz-transform: rotate(-10deg);
   -webkit-transform: rotate(-10deg);
}

#three{
z-index: 3;
background-color: #963;
}

#four{
   z-index: 2;
   right: 70px;
   top: 10px;
   transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -webkit-transform: rotate(10deg);
}

#five{
   z-index: 1;
   right: 150px;
   top: 40px;
   transform: rotate(20deg);
   -moz-transform: rotate(20deg);
   -webkit-transform: rotate(20deg);
}

#one:hover{
   z-index: 4;
   transform: scale(1.1) rotate(-20deg);
   -moz-transform: scale(1.1) rotate(-20deg);
   -webkit-transform: scale(1.1) rotate(-20deg);
}

#two:hover{
   z-index: 4;
   transform: scale(1.1) rotate(-20deg);
   -moz-transform: scale(1.1) rotate(-20deg);
   -webkit-transform: scale(1.1) rotate(-20deg);
}

#three:hover{
   z-index: 4;
   transform: scale(1.1) rotate(-20deg);
   -moz-transform: scale(1.1) rotate(-20deg);
   -webkit-transform: scale(1.1) rotate(-20deg);
}

#four:hover{
   z-index: 4;
   transform: scale(1.1) rotate(20deg);
   -moz-transform: scale(1.1) rotate(20deg);
   -webkit-transform: scale(1.1) rotate(20deg);

}

#five:hover{
   z-index: 4;
   transform: scale(3.1) rotate(20deg);
   -moz-transform: scale(1.1) rotate(20deg);
   -webkit-transform: scale(1.1) rotate(20deg);

}

一只喵，走走停停

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现动态堆叠卡的效果

哈喽，小伙们！今晚我来给大家分享一个关于实现动态堆叠卡的效果，来源于一本名为Div+CSS3+jQuery 网页设计深度剖析的书。这里面也包括我对旋转角度进行的改动，让它看起来更自然。如果大家有更好的建议，欢迎在下方给我留言！ HTML部分 ...
复制链接

扫一扫