Skip to content

Instantly share code, notes, and snippets.

@darshit-shah

darshit-shah/index.html

Last active January 23, 2020 08:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save darshit-shah/a6cb1181e8696841a350d8033b5bdc22 to your computer and use it in GitHub Desktop.
Save darshit-shah/a6cb1181e8696841a350d8033b5bdc22 to your computer and use it in GitHub Desktop.
Download ZIP
Text Background Color using CSS Transition
Raw
index.html
<style>
.clip-text {
font-size: 50px;
font-weight: bold;
text-align: center;
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: arial
}
.clip-text_one {
background-color: #CCC;
background-image: url("data:image/svg+xml;utf8,<svg width='325px' height='50px' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='100%' height='100%' style='fill: red;'/></svg>");
/*background-size: 100px 100px;*/
background-repeat: no-repeat;
background-position: 0px 0;
-webkit-transition:background-position .5s ease-in;
-moz-transition:background-position .5s ease-in;
-o-transition:background-position .5s ease-in;
transition:background-position .5s ease-in;
}
.clip-text_one:hover {
background-position: 600px 0;
-webkit-transition:background-position .5s ease-in;
-moz-transition:background-position .5s ease-in;
-o-transition:background-position .5s ease-in;
transition:background-position .5s ease-in;
}
</style>
<div class="clip-text clip-text_one">Click this for transition</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment