Animated Gradient Text Effect

HTML

[code language=”html”]
<h1 class="linear-wipe">Csshint.com!</h1>
[/code]

CSS / LESS

[code language=”css”]
html { height: 100%; }

body {
background: #333;
text-align: center;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

h1 { font-size: 20vw; }

.linear-wipe {
text-align: center;

background: linear-gradient(to right, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
background-size: 200% auto;

color: #000;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

animation: shine 1s linear infinite;
@keyframes shine {
to {
background-position: 200% center;
}
}
}
[/code]

css gradient animation

The post Animated Gradient Text Effect appeared first on csshint - A designer hub.