利用css3实现照片列表展开小demo

　　效果如下:

其实实现起来很简单，就是控制宽高的变化，然后给他加上transition 过度而已。觉得代码没什么难的地方，就不打注释了，如果哪里有不懂的话，可以直接评论呢。

直接上源码

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="wra">
        <ul class="content">
            <li class="items">
                <div class="inner">
                    <h2>bird</h2>
                    <div class="bg">
                        <div class="close"></div>
                    </div>
                </div>
            </li>
            <li class="items">
                <div class="inner">
                    <h2>bird</h2>
                    <div class="bg">
                        <div class="close"></div>
                    </div>
                </div>
            </li>
            <li class="items">
                <div class="inner">
                    <h2>bird</h2>
                    <div class="bg">
                        <div class="close"></div>
                    </div>
                </div>
            </li>
            <li class="items">
                <div class="inner">
                    <h2>bird</h2>
                    <div class="bg">
                        <div class="close"></div>
                    </div>
                </div>
            </li>
            <li class="items">
                <div class="inner">
                    <h2>bird</h2>
                    <div class="bg">
                        <div class="close"></div>
                    </div>
                </div>
            </li>
            <li class="items">
                <div class="inner">
                    <h2>bird</h2>
                    <div class="bg">
                        <div class="close"></div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>

css代码：

*{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

:root,body,.wra{
    width: 100%;
    height: 100%;
}
.wra{
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wra .content{
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.wra .content .items{
    position: relative;
    height: 100%;
    width: 16%;
    border-radius: 30px;
    transition: height .5s linear, width .7s .5s linear;
}
.wra .content .items:hover .inner .bg{
    opacity: 1;
}
.wra .content .items:hover h2{
    font-size: 30px;
}
.wra .content .items h2{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    z-index: 1;
    transition: font-size .3s , opacity .3s;
}
.wra.wra-active .content .items h2{
    opacity: 0;
}
.wra .content .items .inner{
    width: 100%;
    height: 100%;
    transition: transform .5s ;
}
.wra .content .items .inner .bg{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    border-radius: 30px;
    opacity: .5;
    transition: opacity .3s;
}
.wra .content .items:nth-of-type(1) .inner .bg{
    background-image: url('../img/1.jpg');
}
.wra .content .items:nth-of-type(2) .inner .bg{
    background-image: url('../img/2.jpg');
}
.wra .content .items:nth-of-type(3) .inner .bg{
    background-image: url('../img/3.jpg');
}
.wra .content .items:nth-of-type(4) .inner .bg{
    background-image: url('../img/4.jpg');
}
.wra .content .items:nth-of-type(5) .inner .bg{
    background-image: url('../img/5.jpg');
}
.wra .content .items:nth-of-type(6) .inner .bg{
    background-image: url('../img/6.jpg');
}

.wra .content .items.active{
    width: 100%;
}
.wra .content .items.active .inner .bg{
    opacity: 1;
}
.wra.wra-active .content .items:not(.active){
    width: 0%;
    height: 0%;
}

.wra .content .items .inner{
    transform: translateY(101%);
}

.wra.init .content .items .inner{
    transform: translateY(0%);
}

.wra.init .content .items:nth-of-type(2) .inner{
    transition-delay: .2s;
}
.wra.init .content .items:nth-of-type(3) .inner{
    transition-delay: .3s;
}
.wra.init .content .items:nth-of-type(4) .inner{
    transition-delay: .4s;
}
.wra.init .content .items:nth-of-type(5) .inner{
    transition-delay: .5s;
}
.wra.init .content .items:nth-of-type(6) .inner{
    transition-delay: .6s;
}
.wra .content .items .inner .bg .close{
    opacity: 0;
    transform: rotateZ(0deg);
}
.wra .content .items.active .inner .bg .close{
    position: absolute;
    right: 30px;
    top: 30px;
    width: 30px;
    height: 30px;
    opacity: 1;
    transform: rotateZ(360deg);
}
.wra .content .items.active .inner .bg .close{
    transition: opacity .3s linear 1s, transform .5s linear 1s;
}
.wra .content .items.active .inner .bg .close::after,.wra .content .items.active .inner .bg .close::before{
    position: absolute;
    content: "";
    width: 30px;
    height: 4px;
    background-color: #fff;
    top: calc(50% - 2px);
}
.wra .content .items.active .inner .bg .close::after{
    transform: rotateZ(45deg);
}
.wra .content .items.active .inner .bg .close::before{
    transform: rotateZ(-45deg);
}

jquery代码：

setTimeout(function(){
    $('.wra').addClass('init');
},400)
$('.items').on('click', function(){
    $(this).addClass('active');
    $('.wra').addClass('wra-active');
})
$('.close').on('click', function(e){
    e.stopPropagation();
    $('.items').removeClass('active');
    $('.wra').removeClass('wra-active');
})

利用css3实现照片列表展开小demo

猜你喜欢