HTML&CSS：必学！用骨架屏卡片布局，让信息页“高级感爆棚”

这段代码实现了一个简洁的卡片式布局，适用于展示电影信息或其他内容。通过骨架屏效果模拟加载状态，增强了页面的交互性和用户体验。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }

        body {
            font-family: "Inter", sans-serif;
            background-color: #f2f5f7;
        }

        .card {
            display: flex;
            flex-direction: column;
            flex-basis: 300px;
            flex-shrink: 0;
            flex-grow: 0;
            max-width: 100%;
            background-color: #FFF;
            box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
            border-radius: 10px;
            overflow: hidden;
            margin: 1rem;
        }

        .card-img {
            padding-bottom: 56.25%;
            position: relative;

            img {
                position: absolute;
                width: 100%;
            }
        }

        .card-body {
            padding: 1.5rem;
        }

        .card-title {
            font-size: 1.25rem;
            line-height: 1.33;
            font-weight: 700;

            &.skeleton {
                min-height: 28px;
                border-radius: 4px;
            }
        }

        .card-intro {
            margin-top: .75rem;
            line-height: 1.5;

            &.skeleton {
                min-height: 72px;
                border-radius: 4px;
            }
        }

        .skeleton {
            background-color: #e2e5e7;
            background-image:
                linear-gradient(90deg,
                    rgba(255, 255, 255, 0),
                    rgba(255, 255, 255, 0.5),
                    rgba(255, 255, 255, 0));
            background-size: 40px 100%;
            background-repeat: no-repeat;
            background-position: left -40px top 0;
            animation: shine 1s ease infinite;
        }

        @keyframes shine {
            to {

                background-position: right -40px top 0;
            }
        }


        .container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="card-img skeleton">
            </div>
            <div class="card-body">
                <h2 class="card-title skeleton">
                </h2>
                <p class="card-intro skeleton">
                </p>
            </div>
        </div>
        <div class="card">
            <div class="card-img">
                <img src="https://assets.codepen.io/285131/uslmOwQpdRRUwr6AmBP6JdzeHjS.jpg" />
            </div>
            <div class="card-body">
                <h2 class="card-title">
                    Drive (2011)
                </h2>
                <p class="card-intro">
                    Driver is a skilled Hollywood stuntman who moonlights as a getaway driv...
                </p>
            </div>
        </div>
    </div>

</body>

</html>

HTML 结构

container：定义一个容器，用于包裹所有卡片内容，实现居中布局。
card：定义一个卡片容器，包含图片区域和内容区域。
card-img：定义卡片的图片区域，用于显示图片或骨架屏效果。
card-body：定义卡片的内容区域，包含标题和简介。
card-title：定义卡片的标题，显示电影名称或其他内容。
card-intro：定义卡片的简介，显示电影简介或其他描述性内容。
img：定义图片元素，用于加载外部图片资源。

CSS 样式

*, *:after, *:before：设置全局样式，确保所有元素的box-sizing为border-box。
body：设置页面的整体布局，包括字体、背景颜色和默认样式。
.card：定义卡片的样式，包括布局方式、宽度、背景颜色、阴影、圆角和外边距。
.card-img：定义图片区域的样式，通过padding-bottom实现响应式图片占位，并设置相对定位。
.card-img img：定义图片的样式，确保图片宽度为100%，并绝对定位。
.card-body：定义内容区域的样式，设置内边距。
.card-title：定义标题的样式，包括字体大小、行高和加粗。
.card-title.skeleton：定义骨架屏效果的标题样式，设置最小高度和圆角。
.card-intro：定义简介的样式，包括行高和上边距。
.card-intro.skeleton：定义骨架屏效果的简介样式，设置最小高度和圆角。
.skeleton：定义骨架屏的样式，包括背景颜色、渐变背景、动画效果和圆角。
@keyframes shine：定义骨架屏的闪烁动画，通过改变背景位置实现动态效果。
.container：定义容器的样式，使用绝对定位和flex布局实现水平和垂直居中。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！