css 引导汉堡包动画

Posted 2021-05-13

/* HAMBURGER ANIMATION 2 
created by bux www.woptima.com */

.navbar-toggle{
	-webkit-transition: transform;
    transition: transform;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
    transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
    -webkit-transition-delay: 300ms; 
    transition-delay: 300ms;
}

.navbar-toggle:not(.collapsed) {
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
.navbar-toggle .icon-bar {
    -webkit-transition: opacity, -webkit-transform;
    transition: opacity, -webkit-transform;
    transition: opacity, transform;
    transition: opacity, transform, -webkit-transform;
    -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 .icon-bar:nth-child(3) {
	-webkit-transition-delay: 100ms; 
	transition-delay: 100ms;
	-webkit-transition-duration: 600ms;
    transition-duration: 600ms;
}

.navbar-toggle .icon-bar:nth-child(2), .navbar-toggle .icon-bar:nth-child(4)  {
	-webkit-transition-duration: 700ms;
    transition-duration: 700ms;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-child(4), .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
	-webkit-transition-delay: 300ms; 
	transition-delay: 300ms;
}
.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) {
	-webkit-transition-delay: 0ms; 
	transition-delay: 0ms;
  -webkit-transform: scale(0);
  transform: scale(0);
  
}
.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;
}