利用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

最新文章

热门文章