Source codes:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title> Text Marquee down animation </title>
<style type=”text/css”>
:root{
–gap:4rem;
}
body{
background-image: url(https://images.unsplash.com/photo-1543163521-1bf539c55dd2?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-repeat: round;
height: 100vh;
display: flex;
justify-content: center;
overflow: hidden;
align-items: center;
}
.container{
}
.marquee{
overflow: hidden;
user-select: none;
display: flex;
gap: var(–gap);
transform: rotate(-14deg);
background: darkmagenta;
}
ul{
list-style: none;
flex-shrink: 0;
min-width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(–gap);
animation: marquee 8s linear infinite;
}
.text{
background: linear-gradient(to right, #a2a2a2, #ffffff, #212121);
-webkit-background-clip:text;
-moz-background-clip:text;
background-clip: text;
color: transparent;
font-weight: 400;
font-size: 25ch;
}
@keyframes marquee{
to{
transform: translateX(calc(-100% – var(–gap)));
}
}
</style>
</head>
<body>
<div class=”container”>
<div class=”marquee”>
<ul>
<li> <span class=”text”> Get in touch </span> </li>
</ul>
<ul aria-hidden=”true”>
<li>
<span class=”text”>
Get in touch
</span>
</li>
</ul>
</div>
</div>
</body>
</html>
