:root {
    --light-color: #f6f7f8;
    --dark-color: #edeef1;
}

* {
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    font-family: sans-serif;
    /* 013大雨滂沱 */
    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

img {
    /* 所有图片最大宽度 不超过父元素的宽度 */
    max-width: 100%;
}

.card {
    overflow: hidden;
    width: 350px;
    border-radius: 10px;
    /* 不用边框,用阴影突出一个边框,更有朦胧感 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

/* 头部区 */
.card-header {
    height: 200px;
}

/* 头部图片 */
.card-header img {
    /* 保持宽高比,即使被裁剪 */
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* 内容区 */
.card-content {
    padding: 30px;
    background-color: #fff;
}

/* 标题 */
.card-title {
    margin: 0;
    /* height: 20px; */
}

/* 节选 */
.card-excerpt {
    margin: 10px 0 20px;
    color: #777;
}

/* 作者区 */
.author {
    /* 只加一个弹性布局,让所有子元素自动往左上角飘(类似浮动) */
    display: flex;
}

/* 作者头像:圆形 */
.profile-img {
    /* 溢出隐藏+圆角边框才 等于 圆形头像 */
    overflow: hidden;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* 作者信息区 */
.author-info {
    /* 弹性:上下平分 */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 15px;
    width: 100px;
}

/* 作者 */
.author-info strong {
    margin-bottom: 5px;
}

/* 日期 */
.author-info small {
    margin-top: 5px;
    color: #aaa;
}

/* 关键点:生动背景 */
.animated-bg {
    /* 给所有待加载的背景区加上 渐变背景 */
    background-image: linear-gradient(to right,
            var(--light-color) 0%,
            var(--dark-color) 10%,
            var(--light-color) 20%,
            var(--light-color) 100%);
    /* 背景X轴拉长一倍 */
    background-size: 200% 100%;
    animation: bgPos 1s linear infinite;
}

/* 生动的背景文字 */
.animated-bg-text {
    /* 让所有待加载 的文字区 的每行 变成 100%独占一行 */
    display: inline-flex;
    margin: 0;
    width: 100%;
    height: 10px;
    border-radius: 50px;
}

/* 关键点:利用背景移动,造成渐变条循环的效果 */
@keyframes bgPos {
    0% {
        background-position: 50% 0;
    }

    100% {
        background-position: -150% 0;
    }
}