Question

我希望标题中的红色/橙色在无限范围内（例如范围）在整个循环内交替出现，而不会减慢速度。现在，它只是将文本隐藏在循环中。

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

if let url = URL(string: "https://itunes.apple.com/in/app/smsdaddy/id1450172544?ls=1&mt=8") {
   if #available(iOS 10.0, *) {
       UIApplication.shared.open(url, options: [:], completionHandler: nil)
   } else {
       // Earlier versions
       if UIApplication.shared.canOpenURL(url as URL) {
          UIApplication.shared.openURL(url as URL)
       }
   }
}

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>

如何在微光效果下连续进行色彩交替显示

2 个答案: