我想为我的网页制作一个使用悬停效果的动画导航栏，并且我看到了多个关于如何制作动画导航栏的教程，但我无法获得良好的平滑过渡。所以我想知道哪里出了问题以及是什么制作具有悬停效果的动画导航栏的最佳方法。
谢谢你
这是我的代码，我只使用 HTML 和 CSS。
<!DOCTYPE html>
<head>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible">
<meta name="viewport">
<title>form website practice</title>
<style>
h1{
margin:auto;
text-align:center;
}
.submit{
font-size:2rem;
font-weight:700;
padding:0.5em 1em;
color:red;
input[type=button] {
accent-color: red;
}
background-color:rgba(255,0,0,0.3);
border:10px solid var(accent-color:red);
border-radius:10px;
transition:transform 0.3s;background-color 0.3s,color 0.3s;
}
.submit:hover{
transform:translateY(-10px);
background-color:var(--clr-accent);
color:var(--clr-light);
}
body{
text-align:center;
color:white;
background:black;
}
nav {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 420px;
border-radius: 50px;
text-align: center;
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 25px 20px -20px rgba(0,0,0,0.4);
}
li {
float: left;
}
li a {
display:block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin:10px;
font-size:18px;
font-weight:500;
cursor:pointer;
position:relative;
z-index:2;
}
li a:hover {
background-color: #111;
transition: color 0.5s;
}
li::after{
content:'';
width:100%;
height:100%;
border-radius:30px;
position:absolute;
top:100%;
left:50%;
transform: translate(-50%,-50%);
z-index:-1;
opacity:0;
}
li a:hover::after {
top:50%;
opacity:1;
transition: top 0.5s , opacity 0.5s;
}
</style>
</head>
<body>
<h1>WELCOME TO MY FORM WEBSITE</h1>
<nav>
<li><a href="#About">About</a></li>
<li><a href="#Home">Home</a></li>
<li><a href="#Contact Us">Contact Us</a></li>
<li><a href="#Legal">Legal</a></li>
</nav>
<form>
<br><br><br><br>
<label for="fname">First Name</label>
<input type="text" id="fname" name="First Name"><br>
<br><br>
<label for="lastname">Lastname</label>
<input type="text" id="lastname" name="Lastname"><br>
<br><br>
<label for="DOB">DOB</label>
<input type="date" id="DOB" name="DOB"><br>
<br><br>
<label for="email">E-mail ID</label>
<input type="email" name="email" id="emailinput" placeholder="Please enter email"
pattern="[email protected]"> <span id="message"></span>
<br><br>
<label for="destination">Select Destination</label>
<select name="destination" id="destination">
<option value=" "> </option>
<option value="chota">Chhota-Imambara</option>
<option value="ajmer">Ajmer</option>
<option value="mawsynram">Mawsynram</option>
<option value="amritsar">Amritsar</option>
<option value="hampi">Hampi</option>
<option value="rishikesh">Rishikesh</option>
<option value="jaisalmer">Jaisalmer</option>
<option value="lonavala">Lonavala</option>
<option value="shimla">Shimla</option>
<option value="hampi">Hampi</option>
</select>
<br><br>
<button class="submit">submit</button>
</form>
</body>
</html>
使用引导导航栏而不是创建自己的导航栏