css bootstrap动画汉堡包

Posted 2021-05-13

/* HAMBURGER */
.navbar-toggle .icon-bar {
    -webkit-transition: opacity, -webkit-transform;
    transition: opacity, -webkit-transform;
    transition: opacity, transform;
    transition: opacity, transform, -webkit-transform;
    -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
          transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
    -webkit-transform: translateY(9px) rotate(45deg);
          transform: translateY(9px) rotate(45deg);
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
  opacity: 0;
    -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) {
    -webkit-transform: translateY(-10px) rotate(-45deg);
          transform: translateY(-10px) rotate(-45deg);
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

.navbar-default .navbar-toggle {
    border: none;
}

.navbar-toggle .icon-bar {
    width: 30px;
    height: 4px;
    background-color: #1a95da;
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 6px;
}