In this tutorial, you will learn how to create an inifnite shining text animation using pure CSS. Linear gradient is used to achieve the shining effect. Watch the video below for a detailed tutorial.
<body>
<h1>Winterwind Inc.</h1>
</body>
body {
margin: 0;
background-color: #262a2b;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
font-size: 4em;
font-weight: bold;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
text-align: center;
background: linear-gradient(to right, #666363 0, white 10%, #666363 20%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate 3s linear infinite;
}
@keyframes animate {
0% {
background-position: 0;
}
50% {
background-position: 470px;
}
100% {
background-position: 470px;
}
}