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

本文链接：https://blog.csdn.net/qq_35164169/article/details/80697351

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

编辑工具：Intellij idea

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

一、实现效果图

二、代码分享

index.xml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel = "stylesheet" href="../css/css.css" />
    <title>Title</title>
</head>
<body>
<div class="wrapper">
    <ul class="cards-stack transition">
        <li class="stack stack1">
            <ul>
                <li class="card card1">
                    <img src="../image/d.jpg" alt=""/>
                    <div class="con">pictures</div>
                </li>
                <li class="card card2">
                    <img src="../image/e.jpeg" alt=""/>
                    <div class="con">pictures</div>
                </li>
                <li class="card card3">
                    <img src="../image/c.jpeg" alt=""/>
                    <div class="con">pictures</div>
                </li>
            </ul>
        </li>
        <li class="stack stack2">
            <ul>
                <li class="card card1">
                    <img src="../image/d.jpg" alt=""/>
                    <div class="con">pictures</div>
                </li>
                <li class="card card2">
                    <img src="../image/e.jpeg" alt=""/>
                    <div class="con">pictures</div>
                </li>
                <li class="card card3">
                    <img src="../image/c.jpeg" alt=""/>
                    <div class="con">pictures</div>
                </li>
            </ul>
        </li>
        <li class="stack stack3">
            <ul>
                <li class="card card1">
                    <img src="../image/d.jpg" alt=""/>
                    <div class="con">pictures</div>
                </li>
                <li class="card card2">
                    <img src="../image/e.jpeg" alt=""/>
                    <div class="con">pictures</div>
                </li>
                <li class="card card3">
                    <img src="../image/c.jpeg" alt=""/>
                    <div class="con">pictures</div>
                </li>
            </ul>
        </li>
    </ul>
</div>

<script src = "../js/jquery-3.3.1.js"></script>
<script>
    $('.cards-stack').on('click',function(){
        $(this).toggleClass('transition');
    })
</script>
</body>
</html>

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那个文件不用管，没用

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