1.整体效果
CSS导航栏鼠标下划线效果不仅能够增强导航栏的视觉效果，还能提升用户交互时的直观性和响应感。本文将详细介绍如何使用CSS为导航栏添加动态下划线效果，让企业官网的导航栏更具吸引力和现代感，同时确保用户能够轻松地找到所需信息。
2.完整代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能导航栏</title> </head> <link rel="stylesheet" type="text/css" href="6_3.css"> <body> <nav class="navbar"> <ul> <li><a href="#">首页</a></li> <li> <a href="#">关于我们</a> <ul class="dropdown"> <li><a href="#">团队</a></li> <li><a href="#">历史</a></li> <li><a href="#">文化</a></li> </ul> </li> <li> <a href="#">服务</a> <ul class="dropdown"> <li><a href="#">咨询</a></li> <li><a href="#">支持</a></li> <li><a href="#">培训</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul></nav> </body> </html>
CSS
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .navbar { background-color: #333; padding: 10px 0; text-align: center; } .navbar ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; position: relative; } .navbar ul li { margin: 0 15px; position: relative; } .navbar ul li a { color: white; text-decoration: none; font-size: 18px; position: relative; padding: 5px 0; transition: color 0.3s ease; } .navbar ul li a::after { content: ''; position: absolute; width: 0; height: 2px; background-color: #007BFF; left: 50%; bottom: 0; transition: all 0.3s ease; transform: translateX(-50%); } .navbar ul li a::before { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background-color: #007BFF; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.5); transition: opacity 0.3s ease, transform 0.3s ease; } .navbar ul li a:hover { color: #007BFF; } .navbar ul li a:hover::after { width: 100%; } .navbar ul li a:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1.5); animation: bubble 1s ease-in-out infinite; } @keyframes bubble { 0%, 100% { transform: translate(-50%, -50%) scale(1.5); } 50% { transform: translate(-50%, -150%) scale(1); opacity: 0; } } .navbar ul li a:hover { color: #007BFF; } .navbar ul li a:hover::after { width: 100%; } .navbar ul li .dropdown { display: none; position: absolute; top: 100%; left: 0; background-color: #333; padding: 10px 0; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .dropdown li { padding: 10px 20px; } .dropdown li a { color: white; font-size: 16px; white-space: nowrap; } .navbar ul li:hover .dropdown { display: block; } .navbar ul li .dropdown li a:hover { color: #007BFF; }
