实现效果:
css代码
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Times New Roman', Times, serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 100px; background-color: purple; } ul{ position:relative; display: flex; flex-direction: column; gap: 30px; } ul li { position: relative; list-style: none; } ul li a{ font-size: 50px; position: relative; text-decoration: none; line-height: 1em; letter-spacing: 2px; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255, 255,255, 0.6); } ul li a::before{ content: attr(data-text); position: absolute; color:var(--clr); width: 0; overflow: hidden; transition: 1s; border-right: 5px solid var(--clr); } ul li a:hover::before{ width: 100%; /* -webkit-text-stroke: 1px rgb(11, 11, 167); */ filter: drop-shadow(0 0 50px var(--clr)); }
html代码
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="menu.css"> </head> <body> <div id="box"> <ul> <li style="--clr:blue"><a href="#" data-text=" Home"> Home</a></li> <li style="--clr:yellow"><a href="#" data-text=" About"> About</a></li> <li style="--clr:lightgreen"><a href="#" data-text=" Services"> Services</a></li> <li style="--clr:pink"><a href="#" data-text=" Team "> Team</a></li> </ul> </div> </body> </html>
