如何创建带有动画的垂直渐变条？

Question

我想为您可以在“欢迎来到勒克瑙”旁边看到的栏制作动画因为我对 css 动画了解不多。请任何人帮助。

Answer 1

div {
  height: 400px;
  width: 20px;
  background: linear-gradient(0deg, #ffee00, #ff0000, #ff00ff);
  background-size: 200% 200%;

  -webkit-animation: AnimationName 5s ease infinite;
  -moz-animation: AnimationName 5s ease infinite;
  animation: AnimationName 5s ease infinite;
}

@keyframes AnimationName {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 00%}
}

<div></div>

如何创建带有动画的垂直渐变条？

How to create a vertical gradient bar with animation in it?

css

gradient

css-animations