Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Illusion Animations</title>
<style>
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 30px;
height: 100vh;
background: #121212;
color: whitesmoke;
font: Arial, sans-serif;
}
.illusion-container{
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.color-wave-illusion{
width: 90%;
height: auto;
margin: 0 auto;
padding: 50px 20px;
text-align: center;
background: linear-gradient(90deg, #f00, #0f0, #00f, #f00);
background-size: 400% 100%;
animation: wave 3s linear infinite;
font-size: 65px;
}
@keyframes wave {
0%{
background-position: 0% 0%;
}
100%{
background-position: 100% 0;
}
}
</style>
</head>
<body>
<div class=”illusion-container”>
<h2>
DoolotTech
</h2>
<div class=”color-wave-illusion”>
Color Wave Illusion
</div>
</div>
</body>
</html>
