纯CSS3实现的动感菜单效果(jquery背景自适应浏览器大小)

纯CSS3实现的动感菜单效果(jquery背景自适应浏览器大小)
这是一款纯CSS3实现的导航菜单，带有平滑柔美的动态效果，和jQuery实现的菜单效果几乎没有差别。
jquery背景自适应浏览器大小，jQuery自动滚动切换特效，基于jQuery通用幻灯片特效，jQuery图片放大显示效果，

CSS3 提供了强大的功能，可以创建出各种动态效果，包括导航菜单。以下是一些使用纯 CSS3 实现的导航菜单效果的例子：

1. 基本的下拉菜单效果：

```css

/ 基本样式 /

ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

li {

  position: relative;

}

/ 菜单链接样式 /

a {

  display: block;

  padding: 10px;

  background: #333;

  color: #fff;

  text-decoration: none;

  transition: background 0.3s ease;

}

a:hover {

  background: #555;

}

/ 下拉菜单样式 /

ul ul {

  display: none;

  position: absolute;

  top: 100%;

  left: 0;

}

/ 显示下拉菜单 /

li:hover > ul {

  display: block;

}

```

2. 带有平滑动画的下拉菜单：

```css

/ 动画效果 /

@keyframes fadeIn {

  from { opacity: 0; transform: translateY(-20px); }

  to { opacity: 1; transform: translateY(0); }

}

ul ul {

  animation: fadeIn 0.5s ease forwards;

}

```

3. 水平滑动菜单：

```css

/ 水平滑动菜单 /

ul {

  display: flex;

  justify-content: space-around;

  background: #333;

}

a {

  padding: 10px 20px;

  color: #fff;

  transition: transform 0.3s ease;

}

a:hover {

  transform: translateX(10px);

}

```

4. 汉堡菜单：

```css

/ 汉堡菜单 /

.menu-toggle {

  display: none;

  flex-direction: column;

  cursor: pointer;

}

.menu-toggle div {

  width: 25px;

  height: 3px;

  background: #fff;

  margin: 5px;

  transition: all 0.3s ease;

}

/ 汉堡菜单动画 /

.menu-toggle.active div:nth-child(1) {

  transform: rotate(-45deg) translate(-5px, 6px);

}

.menu-toggle.active div:nth-child(2) {

  opacity: 0;

}

.menu-toggle.active div:nth-child(3) {

  transform: rotate(45deg) translate(-5px, -6px);

}

/ 响应式设计 /

@media (max-width: 768px) {

  .menu-toggle {

    display: flex;

  }

  ul {

    display: none;

    flex-direction: column;

    width: 100%;

  }

  ul li {

    text-align: center;

  }

  .menu-toggle.active + ul {

    display: flex;

  }

}

```

这些例子展示了如何使用 CSS3 来创建具有动态效果的导航菜单。你可以根据自己的需求调整样式和动画效果，以创建独特的用户体验。