Skip to content

Instantly share code, notes, and snippets.

@Gubio

Gubio/live.html

Created June 17, 2020 23:22
Show Gist options
  • Save Gubio/4e28cef3b51f1ce4e318f4072233f32b to your computer and use it in GitHub Desktop.
Save Gubio/4e28cef3b51f1ce4e318f4072233f32b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
live.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Gradient</title>
<style>
body {
margin: 0;
height: 100vh;
width: 100vw;
}
.animated {
background: linear-gradient(46deg, #606af3, #9e57ff, #6b24ce, #c634e6, #c21fff, #d606f7, #8b06f7, #9421f2, #7600ff);
background-size: 1800% 1800%;
-webkit-animation: AnimationName 56s ease infinite;
-moz-animation: AnimationName 56s ease infinite;
-o-animation: AnimationName 56s ease infinite;
animation: AnimationName 56s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
</style>
</head>
<body class="animated">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment