css - 如何创建一个带有动画的垂直渐变条？

Question

我想为您可以在 Welcome to Lucknow 旁边看到的栏设置动画，因为我对 css 动画了解不多。请任何人帮助。

标签： csscss-animationsgradient

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>