Skip to content

Instantly share code, notes, and snippets.

@Grayson-code
Created September 9, 2022 06:19
Show Gist options
  • Save Grayson-code/6fb08cac48c165474cd72cfb72a44cce to your computer and use it in GitHub Desktop.
Save Grayson-code/6fb08cac48c165474cd72cfb72a44cce to your computer and use it in GitHub Desktop.
Animated text fill
<p>
Spice up your type with CSS
<span>
Animated text fill
</span>
&mdash; no JavaScript required &mdash;
</p>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
body { font: 400 1em/1.5 "Neuton"; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0 }
p {
text-transform: uppercase;
letter-spacing: .5em;
display: inline-block;
border: 4px double rgba(255,255,255,.25);
border-width: 4px 0;
padding: 1.5em 0em;
position: absolute;
top: 18%;
left: 50%;
width: 40em;
margin: 0 0 0 -20em;
span {
font: 700 4em/1 "Oswald", sans-serif;
letter-spacing: 0;
padding: .25em 0 .325em;
display: block;
margin: 0 auto;
text-shadow: 0 0 80px rgba(255,255,255,.5);
/* Clip Background Image */
background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
-webkit-background-clip: text;
background-clip: text;
/* Animate Background Image */
-webkit-text-fill-color: transparent;
-webkit-animation: aitf 80s linear infinite;
/* Activate hardware acceleration for smoother animations */
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}
}
/* Animate Background Image */
@-webkit-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
<link href="https://fonts.googleapis.com/css?family=Neuton|Oswald" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment