web前端学习之1——HTML5+CSS3+JS点击展开重叠图片动画

这是一个点击展开重叠图片的动画效果。

编辑工具：Intellij idea

工程文件目录：（由于是跟着直播教程走，所以时间很紧，就随意创建了目录）

一、实现效果图

二、代码分享

index.xml

    
    
    

    
    



    

        

            

                

                    
                    
pictures
                
                

                    
                    
pictures
                
                

                    
                    
pictures
                
            
        
        

            

                

                    
                    
pictures
                
                

                    
                    
pictures
                
                

                    
                    
pictures
                
            
        
        

            

                

                    
                    
pictures
                
                

                    
                    
pictures
                
                

                    
                    
pictures
                
            
        
    

css.css

*{
    margin:0;
    padding:0;
    list-style:none;
    font-size:0;
}

body{
    width:100%;
    height:900px;
    background:linear-gradient(to left top,#f5A1D5,#cdd3e9);
}
.wrapper{
    width:600px;
    margin:100px auto;
    cursor:pointer;
    position:relative;
}
.cards-stack{
    width:100%;
}
.stack{
    position:absolute;
    left:0;
    transition:all 0.4s ease-in;
}

.card{
    position:absolute;
    height:200px;
    width:200px;
    left:0;
    top:0;
    background-color:#fff;
    padding:5px;
    border-radius:10px;
    box-shadow:1px 2px 2px 0 #aaa;
    transition:all 0.4s ease-in;
    transition-delay:0.4s;
}
.card img{
    width:100%;
    height:100%;
    border-radius:10px;
}
.card .con{
    line-height:40px;
    text-align:center;
    font-size:0px;
    padding:10px;
}

.stack .card1{
    z-index:9;
    transform:rotateZ(-2deg);
}
.stack .card2{
    transform:rotateZ(-0deg);
}
.stack .card3{
    z-index:8;
    transform:rotateZ(-2deg);
}
.transition .card1{
    top:440px;
}
.transition .card2{
    top:220px;
}

.transition .stack1{
    left:0;
}
.transition .stack2{
    left:220px;
}
.transition .stack3{
    left:440px;
}

.transition li.card{
    transform:rotateZ(-0deg);
}

jquery-3.3.1.js是开源包

index.jsp那个文件不用管，没用

有问题请留言，欢迎光临！