css 如何在渐变动画文本中设置间隔？

lmvvr0a8 于 2022-11-26 发布在其他

关注(0)|答案(1)|浏览(184)

我试图设置一个间隔，而我的动画渐变文本正在运行，但我不知道如何做到这一点与CSS只。我有3个不同的颜色，我想在黑色开始，变成彩色，然后再回到黑色，像一个循环。

HTML格式

<h2 className="gradient-text">
 Text Exemple
</h2>

CSS格式

.gradient-text {
    background: linear-gradient(45deg, #000, #2FEBDC, #EB413B, #FFA300, #E422EB);
    background-size:400%;
    animation: text-gradient 8s linear infinite;
    padding:5px 0;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    background-clip: text;
      text-fill-color: transparent;
   }
   
   @keyframes text-gradient {
    0% {
     background-position: 0% 50%;
    }
    50% {
     background-position: 100% 50%;
    }
    100% {
     background-position: 50% 100%;
    }
   }

是否可以只使用CSS而不是javascript？

css

来源：https://stackoverflow.com/questions/74550239/how-to-set-interval-in-animated-gradient-text

1条答案

按热度按时间

mqxuamgl1#

你的animation-direction默认设置为normal。为了以相反的顺序回到黑色（即黑色-〉彩色-〉黑色），将其设置为alternate。这将在向前和向后播放动画之间循环。
为了设置播放间隔，（即在恢复动画之前，在黑色状态下等待一段特定的时间），您可以设置两个关键帧，并且在这两个关键帧之间保持不变。这将使您的动画在恢复之前保持一段设定的持续时间。如果您想保持动画的播放速度，您必须增加animation-duration。
您的CSS可能看起来如下所示：

.gradient-text {
    background-image: linear-gradient(45deg, #000, #2FEBDC, #EB413B, #FFA300, #E422EB);
    animation: text-gradient 10s linear alternate infinite;
    padding: 5px 0;
    background-clip: text;
    background-size: 400%;
}

@keyframes text-gradient {
    0% {
        background-position: 0% 50%;
    }

    33% {
        background-position: 0% 50%;
    }

    66% {
        background-position: 50% 100%;
    } /* In my example here, this keyframe at 66% is not needed as the animation is progressing linearly from 33% to 100% anyways... it can be omitted */

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

赞(0）回复(0）举报 2022-11-26

我来回答

css 如何在渐变动画文本中设置间隔？

1条答案

相关问题

热门标签

最新问答