It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 26 May 2020
The text with simple one static colors are very usual. But to attract the attentions to a particular text or sentence, you can use dynamic colors which change by the time. Below we've shown how to do this!
<!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@font-face {
font-family: "ubuntu";
font-style: italic;
font-weight: 300;
src: local("Lato Light Italic"), local("Lato-LightItalic"), url(https://fonts.gstatic.com/s/ubuntucondensed/v8/u-4k0rCzjgs5J7oXnJcM_0kACGMtT-Dfqw.woff2) format("woff2");
}
body {
height: 100vh;
margin: 0;
background-color: #333641;
font-family: "ubuntu", Arial, sans-serif;
overflow-x: hidden;
display: grid;
place-items: center;
}
a {
text-decoration: none;
color: #9ca0b1;
}
.wrapper {
text-align: center;
}
.wrapper h1 {
color: #fff;
font-size: 50px;
font-family: "ubuntu";
text-transform: uppercase;
font-weight: 700;
font-family: "Josefin Sans", sans-serif;
background: linear-gradient(to right, #e72a3a 10%, #fff 50%, #5bdaff 60%);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 1.5s linear infinite;
display: inline-block;
}
@keyframes textclip {
to {
background-position: 200% center;
}
}
</style>
<div class="wrapper"><h1>Kerixa Inc.</h1></div><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!