Skip to content

Instantly share code, notes, and snippets.

@emiremen

emiremen/Animated-Rainbow-Line.html

Created June 1, 2020 22:04
Show Gist options
  • Save emiremen/af0b23da246f6c0d66c4274ed70fe9ab to your computer and use it in GitHub Desktop.
Save emiremen/af0b23da246f6c0d66c4274ed70fe9ab to your computer and use it in GitHub Desktop.
Download ZIP
Animated Rainbow Line With HTML/CSS
Raw
Animated-Rainbow-Line.html
<html>
<head><title>Rainbow Line</title>
<style type="text/css">*{margin: 0;padding: 0;}
.rainbow{
width: 100%;
height: 8px;
background-repeat:repeat-x;
background: linear-gradient(to right,
#eb5252,
#f78f2f,
#f4c151,
#75d850,
#6284FF,
#eb5252
);
animation: rainbow 10s linear infinite;
background-size: 200% 100% !important;
}
@keyframes rainbow{
0% {background-position: 0;}
100% {background-position: 800% 0;}
}
</style>
</head>
<body>
<div class="rainbow"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment