<div class="container">
<h1 class="animated">Merry Christmas</h1>
<p><img src="https://i.ibb.co/8D6XK4m/logo.png" alt="Traversy Media"></p>
</div>
body {
font-family: Arial, Helvetica, sans-serif;
background: #000;
color: #fff;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
background: url('https://i.ibb.co/1sQXJ4z/page-bg.png') no-repeat center center/cover;
height: 100vh;
align-items: center;
justify-content: center;
text-align: center;
}
.animated {
font-family: 'Charm', cursive;
margin: 0;
padding: 0;
font-size: 6rem;
background: url('https://i.ibb.co/89Cf3dm/text-bg.png') no-repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: moveBg 90s linear infinite;
-webkit-animation: moveBg 90s linear infinite;
}
/* Text Background Animation */
@keyframes moveBg {
0% {
background-position: 0% 30%;
}
100% {
background-position: 100% 50%;
}
}
This Pen doesn't use any external JavaScript resources.