css动画实现二级导航栏

最新推荐文章于 2024-08-13 11:44:45 发布

wangxue8203

最新推荐文章于 2024-08-13 11:44:45 发布

阅读量2.1k

点赞数 5

分类专栏： css新手练习文章标签： css动画二级导航栏

本文链接：https://blog.csdn.net/wangxue8203/article/details/81557186

版权

这篇博客介绍了一种使用CSS动画实现二级导航栏的方法。当鼠标悬停在导航项上时，二级菜单会以平滑的旋转效果显示。代码示例详细展示了如何通过CSS样式控制导航栏的背景颜色、边框、字体、过渡效果，以及如何用延迟时间让子菜单逐个显现，创造出流畅的用户体验。

摘要由CSDN通过智能技术生成

描述：鼠标悬空在导航栏上时，二级导航栏以动画方式旋转出现。

实现代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>二级动画导航</title>
</head>
<style>
  body {
   background-color: #CCC;
  }

  .menu {
   list-style: none;
   padding: 0px;
   margin: 0px;
   height: 58px;
  }

  .menu ul {
   list-style: none;
   padding: 0px;
   margin: 0px;
  }

  .menu li {
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
   background: -webkit-linear-gradient(#292929, #252525);
   background: linear-gradient(#292929, #252525);
   border-bottom: 2px solid #181818;
   border-top: 2px solid #303030;
   min-width: 160px;
  }

  .menu>li {
   display: block;
   float: left;
   position: relative;
  }

  .menu>li:first-child {
   border-radius: 5px 0 0;
  }

  .menu a {
   border-left: 3px solid rgba(0, 0, 0, 0);
   color: #808080;
   display: block;
   font-family: 'Lucida Console';
   font-size: 18px;
   line-height: 54px;
   padding: 0 25px;
   text-decoration: none;
  }

  .menu li:hover {
   background-color: #1c1c1c;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
   background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
   background: -o-linear-gradient(#1c1c1c, #1b1b1b);
   background: linear-gradient(#1c1c1c, #1b1b1b);
   border-bottom: 2px solid #222222;
   border-top: 2px solid #1B1B1B;
  }

  .menu li:hover>a {
   border-radius: 5px 0 0 0;
   border-left: 3px solid #C4302B;