CSS特效--折叠卡片

前言

这里用的主要是flex布局+过渡+基础知识点

代码

<div class="con">
            <div class="a">
                <div class="first">
                    <img src="../瀑布流/img/5.jpg" alt="">
                </div>
                <div class="second">
                    <h2>我想睡觉</h2>
                    <p>遗忘是一般刚强的，有创造力的人的法宝，他们会像自然一样的遗忘，自然界就不知道有什么过失，弱者不是把痛苦作为惩前毖后的教训，反而在痛苦中讨生活，浸在里头，天天回顾以往的苦难，折磨自己。——巴尔扎克</p>
                </div>
            </div>
        </div>
        

CSS里面有很多知识点，这里我用注释的方式进行解析

*{
            margin: 0;
            padding: 0;
        }
.con {
/*这里这个大盒子是作为一个弹性盒来实现下面盒子增大的同时是从中间往上下两边增大*/
            position: relative;
            width: 33%;
            height: 600px;
            /*居中处理，还有上面的高度也要设置一个固定值（最好大一点）！！！！不然达不到好的效果*/
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            padding: 30px;
            margin: 0 auto;
        }

        .con .a {
            position: relative;
            min-width: 400px;
            height: 215px;
            background: rgb(247, 243, 243);
            margin: 30px 10px;
            padding: 20px 15px;
            /*这里设置flex是让下面两个盒子竖直排列，事实上块元素本来就独占一行，影响不大*/
            display: flex;
            flex-direction: column;
            box-shadow: 0 5px 202px rgba(0, 0, 0, .5);
        }

        .con .a:hover {
            height: 430px;
        }

        .con .a .first {
        /*margin水平居中*/
            margin: auto;
            position: relative;
            width: 80%;
            height: 260px;
            top: -65px;
            z-index: 1;
            box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
            transition: 0.3s ease-in-out;
        }

        .con .a .second {
            position: relative;
            padding: 10px 15px;
            font-size: 20px;
            text-align: center;
            color: #111;
            /*visibility： hidden 在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间*/
            visibility: hidden;
            opacity: 0;
        }

        .con .a .second h2 {
            margin-bottom: 18px;
        }

        .con .a:hover .second {
            visibility: visible;
            opacity: 1;
            margin-top: -50px !important;
        }

        .con .a .first img {
            width: 100%;
            height: 100%;
            border-radius: 4px;
        }

        .con .a .first:nth-child(2) img {
            width: 100%;
            border-radius: 4px;
        }

效果图：

结尾