1 CSS悬浮卡片样式

如果我们需要制作如下图的悬浮卡片

CSS – 悬浮卡片样式-StubbornHuang Blog

首先我们先用html搭好网页布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css悬浮卡片</title>
</head>
<body>
    <div class="container">
        <div class="card-container">
            <div class="card">
                <div class="content">
                    <h3>冷水坑</h3>
                    <p>《冷水坑》是金特出版的第一部小说集，包含了他自2015年以来创作的四篇小说《冷水坑》《冬民·选章》《暴风雪》和《罪与爱》</p>
                    <a href="https://book.douban.com/subject/36624404/" target="_blank">点我直达</a>
                </div>
            </div>

            <div class="card">
                <div class="content">
                    <h3>辛弃疾新传</h3>
                    <p>他毕生历经浮沉，波澜壮阔的人生经历、旷达豪迈的赤子之心，尽在《辛弃疾新传》的记述之中。</p>
                    <a href="https://book.douban.com/subject/36442202/" target="_blank">点我直达</a>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

上述代码没有css美化初始外观如下

CSS – 悬浮卡片样式-StubbornHuang Blog

现在我们使用css进行美化，css样式为

body {
    background: #f5f5f5;
}
.container {
    background: #fff;
    margin: 50px 200px 0 200px;
}

 .card-container {
     display: flex;
     flex-flow: row wrap;
     flex-wrap: wrap;
     align-content: flex-start;
 }

 .card-container .card {
     position: relative;
     width: 280px;
     height: auto;
     margin: 30px;
     /* 设置阴影 */
     box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
     border-radius: 15px;
     /* 设置card的背景色 */
     background: #fff;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     border-top: 1px solid rgba(255, 255, 255, 0.5);
     border-left: 1px solid rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(5px);
 }

 .card-container .card .content{
     padding: 20px;
     text-align: center;
 }
 .card-container .card .content h3{
     font-size: 1.8em;
     z-index: 1;
 }
 .card-container .card .content p{
     font-size: 1em;
     font-weight: 300;
 }
 .card-container .card .content a{
     position: relative;
     display: inline-block;
     padding: 8px 20px;
     margin-top: 15px;
     background: #4433ff;
     border-radius: 20px;
     text-decoration: none;
     font-weight: 500;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     color:#fff;
     outline: none;
     border: 2px solid #4433ff;
 }

 .card-container .card .content a:hover {
     background: #fff;
     color: #4433ff
 }

完整的html文件如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css卡片</title>
    <style>
        body {
            background: #f5f5f5;
        }
        .container {
            background: #fff;
            margin: 50px 200px 0 200px;
        }

        .card-container {
            display: flex;
            flex-flow: row wrap;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        .card-container .card {
            position: relative;
            width: 280px;
            height: auto;
            margin: 30px;
            /* 设置阴影 */
            box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
            border-radius: 15px;
            /* 设置card的背景色 */
            background: #fff;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1px solid rgba(255, 255, 255, 0.5);
            border-left: 1px solid rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(5px);
        }

        .card-container .card .content{
            padding: 20px;
            text-align: center;
        }
        .card-container .card .content h3{
            font-size: 1.8em;
            z-index: 1;
        }
        .card-container .card .content p{
            font-size: 1em;
            font-weight: 300;
        }
        .card-container .card .content a{
            position: relative;
            display: inline-block;
            padding: 8px 20px;
            margin-top: 15px;
            background: #4433ff;
            border-radius: 20px;
            text-decoration: none;
            font-weight: 500;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            color:#fff;
            outline: none;
            border: 2px solid #4433ff;
        }

        .card-container .card .content a:hover {
            background: #fff;
            color: #4433ff
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="card-container">
            <div class="card">
                <div class="content">
                    <h3>冷水坑</h3>
                    <p>《冷水坑》是金特出版的第一部小说集，包含了他自2015年以来创作的四篇小说《冷水坑》《冬民·选章》《暴风雪》和《罪与爱》</p>
                    <a href="https://book.douban.com/subject/36624404/" target="_blank">点我直达</a>
                </div>
            </div>

            <div class="card">
                <div class="content">
                    <h3>辛弃疾新传</h3>
                    <p>他毕生历经浮沉，波澜壮阔的人生经历、旷达豪迈的赤子之心，尽在《辛弃疾新传》的记述之中。</p>
                    <a href="https://book.douban.com/subject/36442202/" target="_blank">点我直达</a>
                </div>
            </div>

        </div>
    </div>
</body>
</html>