WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
मेनू होवर चमक
3111
Andev.web
संपादक में खोलें
Video
अपना कोड प्रकाशित करें
11
अनुशंसित
30 November 2024
साइट मेनू
13 November 2024
नेविगेशन मेनू
7 February 2025
चमकदार
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
