Created
January 6, 2019 17:32
-
-
Save Kvaibhav01/5cb969c8fffb9437c03a1ce79353e158 to your computer and use it in GitHub Desktop.
CSS Text Background animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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