html5+css3超链接导航条动画效果

ziblog

已于 2025-06-27 15:24:30 修改

阅读量1k

点赞数 17

CC 4.0 BY-SA版权

文章标签： html5 css3 前端

于 2025-05-01 14:36:31 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147650310

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3导航条动画效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', sans-serif;
}

body {
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
}

.nav-container {
background: linear-gradient(135deg, #2c3e50, #34495e);
padding: 15px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
}

.navbar {
display: flex;
list-style: none;
}

.navbar li {
position: relative;
margin: 0 10px;
}

.navbar li a {
position: relative;
display: block;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font-size: 18px;
font-weight: 500;
transition: all 0.3s;
z-index: 1;
overflow: hidden;
border-radius: 5px;
}

/* 悬停动画效果 - 3D翻转 */
.navbar li a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #3498db, #9b59b6);
z-index: -1;
transform: rotateY(90deg);
transform-origin: right;
transition: transform 0.5s ease;
border-radius: 5px;
}

.navbar li a:hover::before {
transform: rotateY(0deg);
}

/* 点击效果 - 脉冲动画 */
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(52, 152, 219, 0); }
100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}

.navbar li a:active {
animation: pulse 0.5s;
}

/* 当前页指示器 */
.navbar li a.active {
background: linear-gradient(45deg, #e74c3c, #f39c12);
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
transform: translateY(-5px);
}

/* 链接文字悬停效果 */
.navbar li a:hover {
color: #fff;
transform: translateY(-3px);
}

.footer {
position: fixed;
bottom: 20px;
width: 100%;
text-align: center;
color: #7f8c8d;
font-size: 14px;
}

.footer a {
color: #3498db;
text-decoration: none;
transition: all 0.3s;
position: relative;
padding: 0 5px;
}

.footer a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #e74c3c;
transition: width 0.3s;
}

.footer a:hover::after {
width: 100%;
}

.footer a:hover {
color: #e74c3c;
}

/* 响应式设计 */
@media (max-width: 768px) {
.navbar {
flex-direction: column;
}

.navbar li {
margin: 5px 0;
}
}
</style>
</head>
<body>
<div class="nav-container">
<ul class="navbar">
<li><a href="#" class="active">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>

<div class="footer">

</div>

<script>
// 添加点击效果
document.querySelectorAll('.navbar li a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();

// 移除所有active类
document.querySelectorAll('.navbar li a').forEach(item => {
item.classList.remove('active');
});

// 为当前点击的链接添加active类
this.classList.add('active');

// 添加点击反馈
this.style.transform = 'translateY(0)';
setTimeout(() => {
this.style.transform = 'translateY(-5px)';
}, 100);
});
});
</script>
</body>
</html>