如何用CSS实现模拟FOUC的加载闪烁灰色遮罩？

你的现有代码存在两个核心问题：一是仅给文本添加背景色，无法真正遮挡内部内容；二是缺少灰色切换的动画逻辑。下面是具体改进方案：

核心改进思路 #

1. 实现内容遮挡：给目标元素设置相对定位，通过伪元素::before生成一个覆盖整个元素的遮罩层，确保完全挡住内部所有内容。
2. 添加灰色闪烁动画：用CSS @keyframes定义包含#F5F5F5在内的2-3种相近灰色的循环切换效果，绑定到遮罩层上实现持续闪烁。

改进后的完整代码 #

.infoColumns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 650px;
    margin-top: 30px;
    margin-bottom: 16px;
}

.flashLoading {
    /* 让伪元素基于当前元素定位 */
    position: relative;
    /* 防止内部内容溢出遮罩（可选） */
    overflow: hidden;
}

.flashLoading::before {
    content: '';
    /* 生成铺满元素的遮罩 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 确保遮罩在内容上方 */
    z-index: 1;
    /* 绑定闪烁动画 */
    animation: flashGray 1.5s linear infinite;
}

/* 定义灰色循环切换动画 */
@keyframes flashGray {
    0% {
        background-color: #F5F5F5;
    }
    50% {
        background-color: #E8E8E8;
    }
    100% {
        background-color: #F0F0F0;
    }
}

<div class="infoColumns">
   <p>Item 1:</p>
   <p class="flashLoading">Value for Item 1</p>
</div>

关键细节说明 #

• 伪元素::before通过绝对定位铺满整个.flashLoading元素，z-index:1保证它在文本内容上方，彻底遮挡内部内容。
• 动画flashGray设置了三种相近灰色的循环切换，linear让颜色过渡更平滑，infinite实现持续闪烁效果。
• 如果需要给更大的容器（比如整个.infoColumns）添加遮罩，直接将.flashLoading类加到容器上即可，逻辑完全通用。

内容的提问来源于stack exchange，提问作者gene b.