WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2960
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
30 November 2024
Texto brilhante
11 August 2025
Coleção de Animação em Círculo CSS
HTML
Copy
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Andev Web</title> <link rel="stylesheet" href="./style.css"> </head> <body> <ul> <li style="--clr:#00ade1"> <a href="#" data-text=" Home"> Home </a> </li> <li style="--clr:#ff6492"> <a href="#" data-text=" About"> About </a> </li> <li style="--clr:#ffdd1c"> <a href="#" data-text=" Services"> Services </a> </li> <li style="--clr:#00dc82"> <a href="#" data-text=" Blog"> Blog </a> </li> <li style="--clr:#dc00d4"> <a href="#" data-text=" Contact"> Contact </a> </li> </ul> </body> </html>
CSS
Copy
* { box-sizing: border-box; padding: 0; margin: 0; font-family: 'Mochiy Pop One', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #252839; } ul { position: relative; display: flex; flex-direction: column; gap: 30px; } ul li { position: relative; list-style: none; } ul li a { font-size: 4em; text-decoration: none; letter-spacing: 2px; line-height: 1em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5); } ul li a::before { content: attr(data-text); position: absolute; color: var(--clr); width: 0; overflow: hidden; transition: 1s; border-right: 8px solid var(--clr); -webkit-text-stroke: 1px var(--clr); } ul li a:hover::before { width: 100%; filter: drop-shadow(0 0 25px var(--clr)) }
JS
Copy
