<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attractive Moving Text</title>
<style>
body {
margin: 0;
padding: 0;
background: #111;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.marquee-container {
width: 100%;
overflow: hidden;
background: #0f0f0f;
/* Dark background for contrast */
padding: 20px 0;
position: relative;
box-shadow: 0 0 20px #111;
}
.marquee-text {
display: inline-block;
white-space: nowrap;
font-size: 2rem;
font-weight: bold;
/* Gradient Text with Animation */
background: linear-gradient(270deg, #ff6ec4,
#7873f5, #4ade80, #facc15, #fb923c, #ef4444);
background-size: 600% 600%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientMove 8s ease infinite, scroll-left 10s linear infinite;
padding-left: 100%;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
/* Subtle glow */
}
/* Pause animation on hover */
.marquee-container:hover .marquee-text {
animation-play-state: paused;
}
/* Horizontal scroll */
@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
/* Animated Gradient Shift */
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>
<div class="marquee-container">
<div class="marquee-text">🚀 Welcome to Our Awesome YouTube channel IT in Hindi!
Stay Tuned for Exciting Updates! 🌟
</div>
</div>
</body>
</html>
0 Comments