Skip to content

Instantly share code, notes, and snippets.

@Kvaibhav01
Created January 6, 2019 17:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kvaibhav01/5cb969c8fffb9437c03a1ce79353e158 to your computer and use it in GitHub Desktop.
Save Kvaibhav01/5cb969c8fffb9437c03a1ce79353e158 to your computer and use it in GitHub Desktop.
CSS Text Background animation
body {
font-family: Monstserrat, sans-serif;
background: #000;
color: #fff;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
background: url('image.png') no-repeat center center/cover;
height: 100vh;
align-items: center;
justify-content: center;
text-align: center;
}
.animated {
font-family: 'Christmas Sparkle', cursive;
margin: 0;
padding: 0;
font-size: 6rem;
background: url('image.png') no-repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: myAnimation 90s linear infinite;
-webkit-animation: myAnimation 90s linear infinite;
}
@keyframes myAnimation {
0% {
background-position: 0% 30%;
}
100% {
background-position: 100% 50%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment