横向轮播文本渐变色彩样式实现问题求助

需要实现轮播文本随位置变色的效果：左侧文本为橙色，右侧为紫色，中间区域有清晰的双色过渡。
之前尝试在顶层设置线性渐变作为遮罩层，但达不到设计预期的效果。

当前实现代码 #

CSS代码 #

.banner {
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    background: rgb(255, 255, 255);
    &__overlay{
        position: absolute;
        background: linear-gradient(90deg, rgba(255,105,20, 0.5) 0%, rgba(145,69,253, 0.5) 100%);
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    &__wrapper{
        display: flex;
        align-items: center;
        gap: 78px;
        animation: banner 20s linear infinite;
    }
    &__item {
        color: black;
        font-size: 1.6rem;
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
        white-space: nowrap;
    }

}

@keyframes banner {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}

HTML结构 #

<div class="banner">
        <div class="banner__overlay"></div>
        <div class="banner__wrapper">
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
        </div>
        <div class="banner__wrapper">
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
        </div>
    </div>

效果对比 #

• 当前效果：文本为黑色，上方覆盖半透明渐变层，整体色调偏暗，完全没实现文本自身的颜色过渡
• 期望效果：文本自身呈现左橙右紫的线性渐变，过渡清晰，轮播时文本颜色随位置自然变化

原来的遮罩层方法是给整个容器加渐变覆盖，会让文本和背景都变浑浊，要实现文本自身的颜色过渡，得用background-clip: text属性，把渐变背景裁剪到文本区域，同时把文本颜色设为透明。

修改后的CSS代码 #

.banner {
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    background: rgb(255, 255, 255);
    
    &__wrapper{
        display: flex;
        align-items: center;
        gap: 78px;
        animation: banner 20s linear infinite;
        /* 给轮播容器设置渐变背景 */
        background: linear-gradient(90deg, #FF6914 0%, #9145FD 100%);
        /* 裁剪背景到文本区域（兼容webkit内核） */
        -webkit-background-clip: text;
        background-clip: text;
    }
    &__item {
        /* 文本设为透明，让渐变背景显示出来 */
        color: transparent;
        font-size: 1.6rem;
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
        white-space: nowrap;
    }
    /* 单独处理图标，避免被渐变影响 */
    &__item img {
        /* 重置背景裁剪规则，让图标正常显示 */
        -webkit-background-clip: border-box;
        background-clip: border-box;
        color: initial;
        /* 如果图标是单色，可设置颜色匹配设计，比如黑色 */
        filter: brightness(0);
    }
}

@keyframes banner {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}

修改后的HTML结构 #

直接删掉原来的<div class="banner__overlay"></div>，其余结构保持不变。

原理说明 #

1. 把线性渐变背景应用到轮播的banner__wrapper容器上
2. 通过background-clip: text将渐变背景仅显示在文本所在区域，配合color: transparent让文本本身透明，从而让渐变成为文本的颜色
3. 对图标单独重置样式，防止图标被渐变影响，保证图标正常显示

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