求助实现类似Monkeytype的橙色渐变从左至右加载条动效

问题分析 #

你之前的代码尝试直接在关键帧中切换linear-gradient背景，但浏览器无法对渐变图像进行平滑过渡，导致动画只能在两个状态间跳变，无法实现连续的滑动效果。

解决方案 #

通过伪元素创建渐变遮罩层，利用位移动画实现橙色渐变从左到右滑动的效果，以下是完整代码：

CSS 代码

body {
    background: black;
}

.line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 25px;
    border-radius: 25px;
    background: #333; /* 深灰色更贴近Monkeytype的视觉风格 */
    overflow: hidden;
}

.line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    /* 橙色透明渐变，滑动时产生自然的过渡效果 */
    background: linear-gradient(to right, rgba(255, 165, 0, 0) 0%, orange 50%, rgba(255, 165, 0, 0) 100%);
    animation: slide 2s ease-in-out infinite;
}

@keyframes slide {
    to {
        left: 100%;
    }
}

HTML 代码

<div class='line'></div>

代码说明 #

• 父容器.line设置为灰色背景并隐藏溢出内容，确保伪元素的渐变只在容器内显示。
• 伪元素::before创建一个从透明到橙色再到透明的渐变层，初始位置在容器左侧外部。
• 通过slide动画将伪元素从左侧外部移动到右侧外部，模拟出橙色渐变从左到右滑动的效果，循环执行。

内容的提问来源于stack exchange，提问作者ship_