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

r囧r小猫 2023-08-17 15:23 111阅读 0赞

效果如下:

![1609428-20190809013920163-1646756365.gif][]

其实实现起来很简单，就是控制 宽 高的变化，然后给他加上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');
    })

转载于:https://www.cnblogs.com/yanggeng/p/11324799.html

[1609428-20190809013920163-1646756365.gif]: /images/20230810/2f72d079a690478a8d0cfa8aabd2cfc9.png