码迷,mamicode.com
首页 > Web开发 > 详细

用bootstrap和css3制作按钮式下拉菜单

时间:2017-09-23 12:21:08      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:动画效果   opd   data   hone   下拉   def   hicon   for   col   

利用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>

 

用bootstrap和css3制作按钮式下拉菜单

标签:动画效果   opd   data   hone   下拉   def   hicon   for   col   

原文地址:http://www.cnblogs.com/sticktong/p/7580603.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!