Bootstrap3.3汉堡菜单切换动画

Bootstrap Navbar Toggle Animations

bootstrap, menu, toggle

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4976
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.pen .navbar-toggle {
    border: none;
    background: transparent !important;
}
.pen .navbar-toggle:hover {
    background: transparent !important;
}
.pen .navbar-toggle .icon-bar {
    width: 22px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
/* ANIMATED X */

.navbar-toggle.x .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    -ms-transform-origin: 10% 10%;
    transform-origin: 10% 10%;
}
.navbar-toggle.x .icon-bar:nth-of-type(2) {
    opacity: 0;
    filter: alpha(opacity=0);
}
.navbar-toggle.x .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    -ms-transform-origin: 10% 90%;
    transform-origin: 10% 90%;
}
/* ANIMATED X COLLAPSED */

.navbar-toggle.x.collapsed .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}
.navbar-toggle.x.collapsed .icon-bar:nth-of-type(2) {
    opacity: 1;
    filter: alpha(opacity=100);
}
.navbar-toggle.x.collapsed .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}
/* END ANIMATED X */
/* ANIMATED RIGHT ARROW */

.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(1) {
    transform: translate3d(0, 0, 0) rotate(0deg);
    transform-origin: right top;
    width: 22px;
}
.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(2) {
    transform: translate3d(0, 0, 0) rotate(0deg);
}
.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(3) {
    transform: translate3d(0, 0, 0) rotate(0deg);
    transform-origin: right bottom;
    width: 22px;
}
.navbar-toggle.rarr .icon-bar:nth-of-type(1) {
    transform: translate3d(11px, 6px, 0) rotate(45deg);
    transform-origin: right top;
    width: 11px;
}
.navbar-toggle.rarr .icon-bar:nth-of-type(2) {
    /* transform: scale(0.75); */
    
    ;
}
.navbar-toggle.rarr .icon-bar:nth-of-type(3) {
    transform: translate3d(11px, -6px, 0) rotate(-45deg);
    transform-origin: right bottom;
    width: 11px;
}
/* END ANIMATED RIGHT ARROW */
/* ANIMATED LEFT ARROW */

.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(1) {
    transform: translate3d(0, 0, 0) rotate(0deg);
    width: 22px;
}
.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(2) {
    transform: translate3d(0, 0, 0) rotate(0deg);
}
.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(3) {
    transform: translate3d(0, 0, 0) rotate(0deg);
    width: 22px;
}
.navbar-toggle.larr .icon-bar:nth-of-type(1) {
    transform: translate3d(0px, 6px, 0) rotate(45deg);
    transform-origin: left top;
    width: 11px;
}
.navbar-toggle.larr .icon-bar:nth-of-type(3) {
    transform: translate3d(0px, -6px, 0) rotate(-45deg);
    transform-origin: left bottom;
    width: 11px;
}
/* END ANIMATED LEFT ARROW */
/* ANIMATED UP ARROW */

.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(1) {
    transform: translate3d(0, 0, 0) rotate(0deg);
    width: 22px;
}
.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(2) {
    transform: translate3d(0, 0, 0) rotate(0deg);
}
.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(3) {
    transform: translate3d(0, 0, 0) rotate(0deg);
    width: 22px;
}
.navbar-toggle.uarr .icon-bar:nth-of-type(1) {
    transform: translate3d(1px, 0, 0) rotate(-45deg);
    transform-origin: center center;
    width: 11px;
}
.navbar-toggle.uarr .icon-bar:nth-of-type(2) {
    transform: rotate(-90deg);
    transform-origin: center center;
}
.navbar-toggle.uarr .icon-bar:nth-of-type(3) {
    transform: translate3d(0px, -14px, 0) rotate(-135deg);
    transform-origin: right top;
    width: 11px;
}
/* END ANIMATED UP ARROW */
/* ANIMATED PLUS */

.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(1) {
    transform: translate3d(0, 0, 0) rotate(0deg);
}
.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(2) {
    transform: translate3d(0, 0, 0) rotate(0deg);
}
.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(3) {
    transform: translate3d(0, 0, 0) rotate(0deg);
}
.navbar-toggle.plus .icon-bar:nth-of-type(1) {
    transform: translate3d(0px, 6px, 0) rotate(90deg);
    transform-origin: center center;
}
.navbar-toggle.plus .icon-bar:nth-of-type(3) {
    transform: translate3d(0px, -6px, 0) rotate(-90deg);
    transform-origin: center center;
}
/* END ANIMATED PLUS */
/* ANIMATED MINUS */

.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(1) {
    transform: translate3d(0, 0, 0) rotate(0deg);
}
.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(2) {
    transform: translate3d(0, 0, 0) rotate(0deg);
}
.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(3) {
    transform: translate3d(0, 0, 0) rotate(0deg);
}
.navbar-toggle.minus .icon-bar:nth-of-type(1) {
    transform: translate3d(0, 6px, 0);
}
.navbar-toggle.minus .icon-bar:nth-of-type(3) {
    transform: translate3d(0, -6px, 0);
}
/* END ANIMATED MINUS */
/* FORCE NAVBAR-TOGGLE */

.pen .navbar-header {
    float: none;
}
.pen .navbar-toggle {
    display: block;
}
.pen .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.pen .navbar-collapse.collapse {
    display: none !important;
}
.pen .navbar-nav {
    float: none !important;
    margin: 7.5px -15px;
}
.pen .navbar-nav > li {
    float: none;
}
.pen .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.pen .navbar-collapse.collapse.in {
    display: block !important;
}
.pen .navbar-brand {
    font-size: 14px;
}

HTML

<nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle x collapsed" data-toggle="collapse" data-target="#navbar-collapse-x">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a rel="nofollow" rel="noreferrer" class="navbar-brand" href="#top">.navbar-toggle.x</a>
                </div>

</div>
        <div class="col-sm-4">

<nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle uarr collapsed" data-toggle="collapse" data-target="#navbar-collapse-uarr">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a rel="nofollow" rel="noreferrer" class="navbar-brand" href="#top">.navbar-toggle.uarr</a>
                </div>

</div>
        <div class="col-sm-4">

<nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle larr collapsed" data-toggle="collapse" data-target="#navbar-collapse-larr">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a rel="nofollow" rel="noreferrer" class="navbar-brand" href="#top">.navbar-toggle.larr</a>
                </div>

</div>
    </div>
    <div class="row">

<nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle rarr collapsed" data-toggle="collapse" data-target="#navbar-collapse-rarr">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a rel="nofollow" rel="noreferrer" class="navbar-brand" href="#top">.navbar-toggle.rarr</a>
                </div>

</div>
        <div class="col-sm-4">

<nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle plus collapsed" data-toggle="collapse" data-target="#navbar-collapse-plus">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a rel="nofollow" rel="noreferrer" class="navbar-brand" href="#top">.navbar-toggle.plus</a>
                </div>

</div>
        <div class="col-sm-4">

<nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle minus collapsed" data-toggle="collapse" data-target="#navbar-collapse-minus">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a rel="nofollow" rel="noreferrer" class="navbar-brand" href="#top">.navbar-toggle.minus</a>
                </div>

</div>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

Bootstrap Navbar Toggle Animations

bootstrap, menu, toggle

编辑器支持Emmet

快捷键

Bootstrap Navbar Toggle Animations

bootstrap, menu, toggle

一款响应式双场景Bootstrap4网页模板（带头部菜单栏滚动动画）

使用JS和CSS实现Bootstrap页面网格布局多列切换动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：