Neon Text Reveal Animation
High-contrast neon text reveal with sliding mask effect
Code
.neon-reveal-container {
position: relative;
width: 100%;
max-width: 500px;
height: 100px;
overflow: hidden;
}
.neon-reveal-text {
font-size: 64px;
font-weight: 900;
text-transform: uppercase;
color: #ffffff;
position: relative;
line-height: 100px;
letter-spacing: 2px;
}
.neon-reveal-text::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: #00ff9d;
text-shadow: 0 0 10px #00ff9d, 0 0 20px #00ff9d, 0 0 40px #00ff9d;
width: 0;
height: 100%;
overflow: hidden;
animation: text-reveal 3s forwards ease-in-out;
}
@keyframes text-reveal {
0% { width: 0; }
100% { width: 100%; }
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-reveal-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="neon-reveal-text"</span> "attr-name"</span>>data-text</span>="REVEAL"</span>>REVEAL</"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>