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

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>