CSS3 grid佈局實現超酷炫分列卡片效果

時間 2019-12-04

標籤 css3 css grid 佈局實現分列卡片效果欄目 CSS 简体版

原文原文鏈接

1、簡介

本實例主要用到CSS3的grid佈局，關於grid的相關知識：www.ruanyifeng.com/blog/2019/0…css

2、效果

公司網絡不行，gif上傳不了。。。反正效果能閃到你的眼(偷笑)html

3、Html和CSS3

<!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">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
    <title>超酷炫分列卡片效果</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            min-height: 100vh;
            align-items: center;
            background: linear-gradient(45deg,#24006b,#f42f8c)
        }
        .container{
            width: 1200px;
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
            grid-gap: 15px;
            margin: 0 auto;
        }
        .container .card{
            position: relative;
            width: 300px;
            height: 400px;
            margin: 0 auto;
            background: #fff;
            box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);


        }   
        .container .card:hover .face.face2{
            height: 60px;;

        }
       
        .container .card .face{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container .card .face.face1{
            box-sizing: border-box;
            padding: 20px;
        }
        .container .card .face.face1 h2{
            margin: 0;
            padding: 0;
        }
        
        .container .card .face.face2{
            background: #111;
            transition: 0.5s;
        }  
        .container .card .face.face2::before{
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            width: 50%;
            height: 100%;
            background: rgba(255, 255, 254, 0.1);
        }
        .container .card:nth-child(1) .face.face2{
            background: linear-gradient(45deg,#3503ad,#f7308c);
        }
        .container .card:nth-child(2) .face.face2{
            background: linear-gradient(45deg,#ccff00,#09afff);
        }
        .container .card:nth-child(3) .face.face2{
            background: linear-gradient(45deg,#e91e63,#ffeb3b);
        }
        .container .card .face.face2 h2{
            margin: 0;
            padding: 0;
            font-size: 10em;
            color: #fff;
            transition: .5s;
            text-shadow: 2px 2px 6px #ccc;

        }
        .container .card:hover .face.face2 h2{
            font-size: 2em;
        } 
    </style>
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="face face1">
                <div class="content">
                    <h2>HaHa。。。</h2>
                    <p>This is just for test This is just for testThis is just for test This is just for test</p>
                </div>
            </div>
            <div class="face face2">
                <h2>01</h2>
            </div>
        </div>
        <div class="card">
            <div class="face face1">
                <div class="content">
                    <h2>HaHa。。。</h2>
                    <p>This is just for test This is just for testThis is just for test This is just for test</p>
                </div>
            </div>
            <div class="face face2">
                <h2>02</h2>
            </div>
        </div>
        <div class="card">
            <div class="face face1">
                <div class="content">
                    <h2>HaHa。。。</h2>
                    <p>This is just for test This is just for testThis is just for test This is just for test</p>
                </div>
            </div>
            <div class="face face2">
                <h2>03</h2>
            </div>
        </div>
    </div>
</body>

</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。