水平轮播中的文本样式问题。文字应该改变颜色

Question

文本应根据其所在位置改变颜色。例如，左边的角应该是橙色，右边的角是紫色。你可以看到中间有明显的过渡，那里有两种颜色的边框。

实际上，它是一个线性渐变背景，我将其设置为覆盖在顶层上。但是我无法得到与Figma相同的结果。

我做了什么： 代码：

.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%);
    }
}

它必须是什么样子：

<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>

Answer 1

只需将这个

 background: linear-gradient(90deg, rgba(255,105,20, 0.5) 0%, rgba(145,69,253, 0.5) 100%);

替换为这个

background: linear-gradient(90deg, rgba(185, 68, 0, 0.5) 0%, rgba(82, 28, 148, 0.8) 100%);

即可。

Answer 2

看起来很酷。您可以使用背景剪辑，位置必须是相对的。而且文字是透明的。

position: relative; /* gradient is applied relative to the item */
z-index: 20; /*  the text is on top of the overlay */
color: transparent; /*text transparent */
background-clip: text; /* gradient only to the text */

这是完整的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 {
        font-size: 1.6rem;
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
        white-space: nowrap;
        position: relative;
        z-index: 20; 
        color: transparent;
        background-clip: text; 
    }
    &__item:nth-child(odd) {
        background-image: linear-gradient(90deg, rgba(255, 105, 20, 0.5) 0%, rgba(145, 69, 253, 0.5) 100%);
    }
    &__item:nth-child(even) {
        background-image: linear-gradient(90deg, rgba(145, 69, 253, 0.5) 0%, rgba(255, 105, 20, 0.5) 100%);
    }
}

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

https://codepen.io/pmdnawaz1/pen/eYXGWpq