Vanilla JS(纯JavaScript)和CSS动画是两种常用的网页交互技术。Vanilla JS指的是不依赖任何框架或库的纯JavaScript代码,而CSS动画则是通过CSS样式和关键帧来实现页面元素的动态效果。
顶部导航栏的打开/关闭动画是一个常见的应用场景,可以提升用户体验,使界面更加生动和直观。
以下是一个使用Vanilla JS和CSS实现顶部导航栏打开/关闭动画的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Navbar Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="top-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<button id="toggle-nav">Toggle Nav</button>
<script src="script.js"></script>
</body>
</html>
#top-nav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
overflow: hidden;
transition: height 0.3s ease-in-out;
height: 0;
}
#top-nav.active {
height: 50px;
}
#top-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-nav li {
display: inline;
margin-right: 20px;
}
#top-nav a {
color: white;
text-decoration: none;
line-height: 50px;
}
document.getElementById('toggle-nav').addEventListener('click', function() {
var nav = document.getElementById('top-nav');
nav.classList.toggle('active');
});
transform: translateZ(0)
),避免在动画过程中执行复杂的JavaScript操作。-webkit-
、-moz-
)确保兼容性,或使用Autoprefixer等工具自动添加前缀。<body>
标签底部,或使用DOMContentLoaded
事件确保DOM完全加载后再绑定事件。通过以上示例和解释,你应该能够实现一个简单的顶部导航栏打开/关闭动画,并了解相关的基础概念和技术细节。
领取专属 10元无门槛券
手把手带您无忧上云