如何在微光效果中连续交替颜色

Question

我希望标题中文本中的那些红色/橙色颜色在无限循环中交替出现，就像一个范围，在一个循环中，不会放慢速度。 现在它只是将文本隐藏在一个循环中。

我尝试使用线性渐变来切换，但无法弄清楚 在正确的轨道上：http://recordit.co/HFknq7M2TB 我想要那些颜色，但无限且不减慢。只是从左到右的连续范围。

.landtitlep {
margin-bottom: 5%;

background: linear-gradient(to right, #ff6600 10%, #800000 70%, #cc0000 100%);


-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 10vw;
font-family: "Poppins", sans-serif;

text-align: center;







background-clip: text;
animation-name: shimmer;
animation-duration: 7s;
animation-iteration-count: infinite;
animation: shimmer 7s infinite;
/*background-repeat: no-repeat;*/





        text-align: center;



    background-size: 70% 100%;

    background-clip: text;

    animation-name: shimmer;

    animation-duration: 2s;

    animation-iteration-count: infinite;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: linear-gradient(to right, #ff6600 10%, #800000 70%, #cc0000 100%);


}


@keyframes shimmer {
0% {
    background-position: top left;
}

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

Answer 1

我感谢所有建议，但我更关注这个： 这正是我想要的。完美的渐变动画。感谢所有帮助过的人！

.landtitlep {
    margin-bottom: 5%;

    background: linear-gradient(to right, #ff6600 10%, #800000 70%, #cc0000 100%);

    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 10vw;
    font-family: "Poppins", sans-serif;

    text-align: center;




      color: #000;




  text-align: center;

  background: -webkit-linear-gradient(right, #ff6600 0%, #800000 25%, #cc0000 50%, yellow 100%) repeat;
  -webkit-background-clip: text;
  -ms-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -ms-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-animation-name: shimmer;
  -webkit-animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;








}


@keyframes shimmer {
    0% {
        background-position: 0,0;
    }

    100% {
       background-position: 8000px 3000px;
    }
}

Answer 2

我使用了红色和黑色的background-image 来显示动态动画微光效果。试试这个例子：

span {
    font-size: 4em;
    letter-spacing: 0;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
    background: url(https://i.stack.imgur.com/6AqCS.jpg) repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 30s linear infinite;
    -webkit-animation: shimmer 30s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    animation-direction: normal;
}

@-webkit-keyframes shimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

<span>Hello World!</span>