CSS动画效果（官网智能导航）

最新推荐文章于 2024-10-12 11:44:52 发布

身形似鹤形

最新推荐文章于 2024-10-12 11:44:52 发布

阅读量707

点赞数 3

分类专栏： JavaWeb 文章标签： css 前端

本文链接：https://blog.csdn.net/2303_82176667/article/details/139408336

版权

JavaWeb 专栏收录该内容

29 篇文章

订阅专栏

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa6ibiceejK9loT70yREYASOhuJpq356QPP3GEycLLzMqialBWxAeIAlgB7wnFX0N5Kh3wxtdLxExFRDQ/640?wx_fmt=gif&from=appmsg&wxfrom=13

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;  
}