html - 使用 CSS "animation"自定义 Bootstrap Brandname 组件

Question

使用 Bootstrap Navbar 我想用 CSS“动画”替换品牌名称(左上角)的文本。我没有成功获得左上角的动画(它在右上角)；而且它在大屏幕时会消失，而我想保留它。

这是 fiddle : http://jsfiddle.net/musicformellons/xcywkus2/

和 html:

    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-custom navbar-static-top">

    <div class="container">
    <div class="navbar-header">
         <button type="button"
                 aria-expanded="false"
                 aria-controls="navbar"
                 class="navbar-toggle">

<!--                   <a class="navbar-brand navbar-custom" href="{% url 'home' %}"> -->


                  <a class="navbar-brand navbar-custom">    


                    <span class="sr-only">Toggle navigation</span>
                      <div id="our-icon">
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                      </div>
                  </a>
        </button>

        </div>

      <div class="container">
        <div class="navbar-header">
          <button type="button"
                  class="navbar-toggle collapsed"
                  data-toggle="collapse"
                  data-target="#navbar"
                  aria-expanded="false"
                  aria-controls="navbar">

             <span class="sr-only">Toggle navigation</span>
              <div id="nav-icon4">
                  <span></span>
                  <span></span>
                  <span></span>
              </div>

         </button>


        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="{% url 'home' %}">Home</a></li>
            <li><a href="{% url 'about' %}">About</a></li>
            <li><a href="{% url 'contact' %}">Contact</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">

            <li><a href="{% url 'account_signup' %}">Register</a></li>

          </ul>




        </div><!--/.nav-collapse -->
      </div>
    </nav>

还有 CSS:

body {
    min-height: 100px;
}

.navbar.navbar-custom {
    margin-bottom: 19px;
    background-color: rgba(204, 78, 63, 0.75);
    border-color: rgba(192, 40, 8, 0.75)
}

/*brandname*/
.navbar.navbar-custom .navbar-brand {
    color: rgba(255, 217, 217,1);
    padding: 14x15px;
    font-size: 28px;
    font-family: Raleway;
}

/*The other navbar -not brandname- menu font items*/
.navbar.navbar-custom .navbar-nav>li>a {
    color: rgba(241,210,210,1);
    font-size: 20px;
    font-family: Raleway;
}

.navbar.navbar-custom .navbar-brand:hover {
    color: rgba(255,255,255,1);
}

.navbar.navbar-custom .navbar-nav>li>a:hover {
    color: rgba(255,255,255,1);
}

.navbar.navbar-custom .navbar-toggle {
    border-color: transparent !important;
}


.navbar.navbar-custom .navbar-toggle  {
    background-color: transparent !important;
}



/* START HAMBURGER bench-toggle */
#nav-icon4 {
  width: 36px;
  height: 14px;
  position: relative;
  margin: 1px auto;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: rgba(255, 200, 192, 1);
  border-radius: 9px;
  left: 0;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}


/* BEFORE collapsed: hamburger */
#nav-icon4 span:nth-child(1) {
  top: -4px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 6px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}


/*The Brandname "animation CSS":*/

#our-icon {
  width: 45px;
  height: 20px;
  /*border-radius: 5px;  */
  position: relative;
}

#our-icon span {
  display: block;
  position: absolute;
  border: 3px rgba(255, 217, 217,1);
  width: 17.6471%;
  height: 30%;
  bottom: 2px;
  left: 0%;
  background: rgba(204, 78, 63, 0.75);
  transition-timing-function: ease-in-out;
}

#our-icon span:nth-child(1) {
  left: 0%;
  border-radius: 25px;
}

#our-icon.open span:nth-child(1) {
  left: 12%;
  border-radius: 25px;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#our-icon.open span:nth-child(3) {
  left: 36%;
  bottom: 25px;
  border-radius: 25px;
  -webkit-transform: translate(-20px,0px);
  -moz-transform: translate(-20px,0px);
  -o-transform: translate(-20px,0px);
  transform: translate(-20px,0px);
  -webkit-transition: .25s ease-in-out .7s;
  -moz-transition: .25s ease-in-out .7s;
  -o-transition: .25s ease-in-out .7s;
  transition: .3s ease-in-out .6s;
  opacity: 0;
}

#our-icon span:nth-child(2) {
  width: 3px;
  height: 51%;
  bottom: 27%;
  background: rgba(255, 217, 217,1);
  border: 0;
}

#our-icon.open span:nth-child(4) {
  width: 3px;
  height: 38%;
  bottom: 27%;
  left: 15.032%;
  background: rgba(255, 217, 217,1);
  border: 0;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180deg);
  -o-transform: rotateZ(-180deg);
  transform: rotate(-180deg) ;
  -webkit-transition: .25s ease-in-out .7s;
  -moz-transition: .25s ease-in-out .7s;
  -o-transition: .25s ease-in-out .65s;
  transition: .3s ease-in-out .6s;
  opacity: 0;
}

#our-icon span:nth-child(3) {
  bottom: 27%;
  left: 28.5%;
  border-radius: 25px;
  transition: .3s ease-in-out .3s;
}

#our-icon.open span:nth-child(5) {
  bottom: 27%;
  left: 46%;
  border-radius: 25px;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180deg);
  -o-transform: rotateZ(-180deg);
  transform: rotateZ(-180deg) ;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .3s ease-in-out .3s;
  opacity: 0;
}

#our-icon span:nth-child(4) {
  width: 3px;
  height: 40%;
  bottom: 10%;
  left: 44%;
  background: rgba(255, 217, 217,1);
  border: 0;
  transition: .3s ease-in-out .3s;
}

#our-icon.open span:nth-child(6) {
  width: 3px;
  height: 40%;
  bottom: 10%;
  left: 46.5%;
  background: rgba(255, 217, 217,1);
  border: 0;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180dreg);
  -o-transform: rotateZ(-180deg);
  transform: rotateZ(-180deg) ;
  -webkit-transition: .35s ease-in-out .35s;
  -moz-transition: .35s ease-in-out .35s;
  -o-transition: .35s ease-in-out .35s;
  transition: .3s ease-in-out .3s;
  opacity: 0;
}

#our-icon span:nth-child(5) {
  bottom: 27%;
  left: 51%;
  border-radius: 25px;
  transition: .3s ease-in-out .6s;
}

#our-icon span:nth-child(6) {
  width: 3px;
  height: 42%;
  bottom: 32%;
  left: 51%;
  background: rgba(255, 217, 217,1);
  border: 0;
  transition: .3s ease-in-out .6s;
}

Answer 1

以下是如何用它代替标准的 navbar-brand。

您不需要两个单独的容器 和navbar-header div。您的切换按钮和动画都需要位于一个 navbar-header div 内，并且顺序相反(navbar-toggle 然后是 navbar-brand ).

参见工作示例和 Docs .

*旁注:如果您的最终目的是使用动画打开移动菜单，您必须考虑是否使用相同的类(简单且可能)正常的切换按钮使用，如果在移动视口(viewport)之外(768px 以上)点击它，你会得到一些不希望的结果，因为菜单已经准备好暴露，而不是隐藏，因为按钮是用来工作的。

$('#our-icon').on('click', function() {
  $(this).toggleClass('open');
});

body {
  min-height: 100px;
}
.navbar.navbar-custom {
  margin-bottom: 19px;
  background-color: rgba(204, 78, 63, 0.75);
  border-color: rgba(192, 40, 8, 0.75)
}
/*brandname*/

.navbar.navbar-custom .navbar-brand {
  cursor: pointer;
}
/*The other navbar -not brandname- menu font items*/

.navbar.navbar-custom .navbar-nav>li>a {
  color: rgba(241, 210, 210, 1);
  font-size: 20px;
  font-family: Raleway;
}
.navbar.navbar-custom .navbar-brand:hover {
  color: rgba(255, 255, 255, 1);
}
.navbar.navbar-custom .navbar-nav>li>a:hover {
  color: rgba(255, 255, 255, 1);
}
.navbar.navbar-custom .navbar-toggle {
  border-color: transparent;
}
.navbar.navbar-custom .navbar-toggle {
  background-color: transparent;
}
/* START HAMBURGER bench-toggle */

#nav-icon4 {
  width: 36px;
  height: 14px;
  position: relative;
  margin: 1px auto;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
#nav-icon4 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: rgba(255, 200, 192, 1);
  border-radius: 9px;
  left: 0;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
/* BEFORE collapsed: hamburger */

#nav-icon4 span:nth-child(1) {
  top: -4px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
  top: 6px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
/*The Brandname "animation CSS":*/

#our-icon {
  width: 45px;
  height: 20px;
  /*border-radius: 5px;  */
  position: relative;
}
#our-icon span {
  display: block;
  position: absolute;
  border: 3px rgba(255, 217, 217, 1);
  width: 17.6471%;
  height: 30%;
  bottom: 2px;
  left: 0%;
  background: rgba(204, 78, 63, 0.75);
  transition-timing-function: ease-in-out;
}
#our-icon span:nth-child(1) {
  left: 0%;
  border-radius: 25px;
}
#our-icon.open span:nth-child(1) {
  left: 12%;
  border-radius: 25px;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#our-icon.open span:nth-child(3) {
  left: 36%;
  bottom: 25px;
  border-radius: 25px;
  -webkit-transform: translate(-20px, 0px);
  -moz-transform: translate(-20px, 0px);
  -o-transform: translate(-20px, 0px);
  transform: translate(-20px, 0px);
  -webkit-transition: .25s ease-in-out .7s;
  -moz-transition: .25s ease-in-out .7s;
  -o-transition: .25s ease-in-out .7s;
  transition: .3s ease-in-out .6s;
  opacity: 0;
}
#our-icon span:nth-child(2) {
  width: 3px;
  height: 51%;
  bottom: 27%;
  background: rgba(255, 217, 217, 1);
  border: 0;
}
#our-icon.open span:nth-child(4) {
  width: 3px;
  height: 38%;
  bottom: 27%;
  left: 15.032%;
  background: rgba(255, 217, 217, 1);
  border: 0;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180deg);
  -o-transform: rotateZ(-180deg);
  transform: rotate(-180deg);
  -webkit-transition: .25s ease-in-out .7s;
  -moz-transition: .25s ease-in-out .7s;
  -o-transition: .25s ease-in-out .65s;
  transition: .3s ease-in-out .6s;
  opacity: 0;
}
#our-icon span:nth-child(3) {
  bottom: 27%;
  left: 28.5%;
  border-radius: 25px;
  transition: .3s ease-in-out .3s;
}
#our-icon.open span:nth-child(5) {
  bottom: 27%;
  left: 46%;
  border-radius: 25px;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180deg);
  -o-transform: rotateZ(-180deg);
  transform: rotateZ(-180deg);
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .3s ease-in-out .3s;
  opacity: 0;
}
#our-icon span:nth-child(4) {
  width: 3px;
  height: 40%;
  bottom: 10%;
  left: 44%;
  background: rgba(255, 217, 217, 1);
  border: 0;
  transition: .3s ease-in-out .3s;
}
#our-icon.open span:nth-child(6) {
  width: 3px;
  height: 40%;
  bottom: 10%;
  left: 46.5%;
  background: rgba(255, 217, 217, 1);
  border: 0;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180dreg);
  -o-transform: rotateZ(-180deg);
  transform: rotateZ(-180deg);
  -webkit-transition: .35s ease-in-out .35s;
  -moz-transition: .35s ease-in-out .35s;
  -o-transition: .35s ease-in-out .35s;
  transition: .3s ease-in-out .3s;
  opacity: 0;
}
#our-icon span:nth-child(5) {
  bottom: 27%;
  left: 51%;
  border-radius: 25px;
  transition: .3s ease-in-out .6s;
}
#our-icon span:nth-child(6) {
  width: 3px;
  height: 42%;
  bottom: 32%;
  left: 51%;
  background: rgba(255, 217, 217, 1);
  border: 0;
  transition: .3s ease-in-out .6s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>

        <div id="nav-icon4"> <span></span>
          <span></span>
          <span></span>

        </div>
      </button>
      <a class="navbar-brand">
        <div id="our-icon"> <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </div>
      </a>

    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="{% url 'home' %}">Home</a>

        </li>
        <li><a href="{% url 'about' %}">About</a>

        </li>
        <li><a href="{% url 'contact' %}">Contact</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="{% url 'account_signup' %}">Register</a>

        </li>
      </ul>
    </div>
  </div>
</nav>