Skip to content

Instantly share code, notes, and snippets.

@richarddewit
Last active November 9, 2020 09:33
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save richarddewit/5f131bb71f36b04462bcf1fa51e95253 to your computer and use it in GitHub Desktop.
Seamless Animated RGB Rainbow strip - https://codepen.io/richarddewit/pen/VwjEWEL
.rainbow-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 10px;
width: 100%;
overflow: hidden;
}
.rainbow {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 200%;
background: linear-gradient(
90deg,
#ff2400,
#e81d1d,
#e8b71d,
#e3e81d,
#1de840,
#1ddde8,
#2b1de8,
#dd00f3,
#dd00f3,
#ff2400,
#e81d1d,
#e8b71d,
#e3e81d,
#1de840,
#1ddde8,
#2b1de8,
#dd00f3,
#dd00f3,
#ff2400
);
transform: translate3d(0, 0, 0);
animation: rainbow 6s linear infinite;
}
@keyframes rainbow {
100% {
transform: translateX(-50%);
}
}
<div class="rainbow-wrapper">
<div class="rainbow"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment