用bootstrap和css3制作按钮式下拉菜单-优快云博客

本文介绍如何使用Bootstrap框架的字体图标与下拉菜单结合CSS3动画，制作出具有平滑淡入效果的按钮式下拉菜单。示例中利用了自定义样式类和关键帧动画实现菜单项的渐显动画。

利用bootstrap框架的字体图标和下拉菜单效果，以及css3的动画效果，可以做出比较优雅的按钮式下拉菜单样式

  <style>
    .myBtnStyle .dropdown-menu span{
      margin:5px;
    }
    .myBtnStyle .dropdown-menu {
      animation: 0.5s linear fadeIn;  //css3新特性animation
    }
    @keyframes fadeIn {  //通过keyframes规则创建动画特效，原理为将一套css样式逐渐转化成另一种css样式
      0%{opacity:0;transform: translateY(-20);}
      100%{opacity: 1;transform: translateY(0);}
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="dropdown myBtnStyle open">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        explotion
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">
          <span class="glyphicon glyphicon-headphones"></span>   //span标签包裹的字体图标
          moving</a></li>
        <li><a href="#">
          <span class="glyphicon glyphicon-headphones"></span>
          raging</a></li>
        <li><a href="#">
          <span class="glyphicon glyphicon-headphones"></span>
          daniangmener</a></li>
        <li><a href="#">
          <span class="glyphicon glyphicon-headphones"></span>
          holy</a></li>
      </ul>
    </div>
  </div>
</body>