CSS 3.0实现卡片悬停立体特效

越陌度阡

发布于 2020-11-26 03:27:18

1.6K00

代码可运行

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

运行总次数：0

代码可运行

今天给大家分享一个用CSS 3.0实现的卡片悬停立体特效，效果如下：

以下是代码实现，欢迎大家制复粘贴和收藏。

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS 3.0实现卡片悬停立体特效</title>
        <style>
            * {
                font-family: '微软雅黑', sans-serif;
                box-sizing: border-box;
            }

            body {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                background: #ebf5fc;
            }

            .container {
                position: relative;
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 1100px;
                flex-wrap: wrap;
            }

            .container .card {
                width: 320px;
                margin: 20px;
                padding: 40px 30px;
                background: #ebf5fc;
                border-radius: 40px;
                box-shadow: -6px -6px 20px rgba(255, 255, 255, 1),
                    6px 6px 20px rgba(0, 0, 0, .1);
            }

            .container .card:hover {
                box-shadow: inset -6px -6px 10px rgba(255, 255, 255, 0.5),
                    inset 6px 6px 20px rgba(0, 0, 0, 0.05);
            }

            .container .card .imgBx {
                position: relative;
                text-align: center;
            }

            .container .card .imgBx img {
                max-width: 120px;
            }

            .container .card .contentBx {
                position: relative;
                margin-top: 20px;
                text-align: center;
            }

            .container .card .contentBx h2 {
                color: #32a3b1;
                font-weight: 700;
                font-size: 1.4em;
                letter-spacing: 2px;
            }

            .container .card .contentBx p {
                color: #32a3b1;
            }

            .container .card .contentBx a {
                display: inline-block;
                padding: 10px 20px;
                margin-top: 15px;
                border-radius: 40px;
                color: #32a3b1;
                font-size: 16px;
                text-decoration: none;
                box-shadow: -4px -4px 15px rgba(255, 255, 255, 1),
                    4px 4px 15px rgba(0, 0, 0, .1);
            }

            .container .card .contentBx a:hover {
                box-shadow: inset -4px -4px 10px rgba(255, 255, 255, 0.5),
                    inset 4px 4px 10px rgba(0, 0, 0, .1);
            }

            .container .card .contentBx a:hover span {
                display: block;
                transform: scale(0.98);
            }

            .container .card:hover .imgBx,
            .container .card:hover .contentBx {
                transform: scale(0.98);
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="card">
                <div class="imgBx">
                    <img src="design.png" alt="">
                </div>
                <div class="contentBx">
                    <h2>设计</h2>
                    <p>任何时候，无论你面临着生命的何等困惑，抑或经受着多少挫折，无论道路如何的艰难，无论希望变得如何渺茫，请你不要绝望，再试一次，成功一定属于你!</p>
                    <a href="#"><span>Read More</span></a>
                </div>
            </div>
            <div class="card">
                <div class="imgBx">
                    <img src="code.png" alt="">
                </div>
                <div class="contentBx">
                    <h2>编码</h2>
                    <p>任何时候，无论你面临着生命的何等困惑，抑或经受着多少挫折，无论道路如何的艰难，无论希望变得如何渺茫，请你不要绝望，再试一次，成功一定属于你!</p>
                    <a href="#"><span>Read More</span></a>
                </div>
            </div>
            <div class="card">
                <div class="imgBx">
                    <img src="launch.png" alt="">
                </div>
                <div class="contentBx">
                    <h2>成长</h2>
                    <p>任何时候，无论你面临着生命的何等困惑，抑或经受着多少挫折，无论道路如何的艰难，无论希望变得如何渺茫，请你不要绝望，再试一次，成功一定属于你!</p>
                    <a href="#"><span>Read More</span></a>
                </div>
            </div>
        </div>
    </body>

</html>