js+css实现14种左侧菜单弹出方式过渡动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：js+css实现14种左侧菜单弹出方式过渡动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
    <style>
        body {
                background:#444;
                color:#48a770;
                font-weight:300;
                font-family:'Lato',Calibri,Arial,sans-serif;
        }
        a {
                text-decoration:none;
                color:#48a770;
                outline:none;
        }
        a:hover,a:focus {
                color:#2c774b;
                outline:none;
        }
        /* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */.clearfix:before,.clearfix:after {
                display:table;
                content:" ";
        }
        .clearfix:after {
                clear:both;
        }
        .codrops-header,.codrops-top {
                font-family:'Lato',Arial,sans-serif;
        }
        .codrops-header {
                margin:0 auto 3em;
                padding:3em;
                text-align:center;
        }
        .codrops-header h1 {
                margin:0;
                font-weight:300;
                font-size:2.625em;
                line-height:1.3;
        }
        .codrops-header span {
                display:block;
                padding:0 0 0.6em 0.1em;
                font-size:60%;
                color:#aca89a;
        }
        /* To Navigation Style */.codrops-top {
                width:100%;
                text-transform:uppercase;
                font-size:0.69em;
                line-height:2.2;
                font-weight:400;
                background:rgba(255,255,255,0.3);
        }
        .codrops-top a {
                display:inline-block;
                padding:0 1em;
                text-decoration:none;
                letter-spacing:0.1em;
        }
        .codrops-top a:hover {
                background:rgba(255,255,255,0.4);
                color:#333;
        }
        .codrops-top span.right {
                float:right;
        }
        .codrops-top span.right a {
                display:block;
                float:left;
        }
        .codrops-icon:before {
                margin:0 4px;
                text-transform:none;
                font-weight:normal;
                font-style:normal;
                font-variant:normal;
                font-family:'codropsicons';
                line-height:1;
                speak:none;
                -webkit-font-smoothing:antialiased;
        }
        .codrops-icon-drop:before {
                content:"\e001";
        }
        .codrops-icon-prev:before {
                content:"\e004";
        }
        .main {
                max-width:69em;
                margin:0 auto;
        }
        .column {
                float:left;
                width:50%;
                padding:0 2em;
                min-height:300px;
                position:relative;
                text-align:right;
        }
        .column:nth-child(2) {
                box-shadow:-1px 0 0 rgba(0,0,0,0.1);
                text-align:left;
        }
        .column p {
                font-weight:300;
                font-size:2em;
                padding:0 0 0.5em;
                margin:0;
                line-height:1.5;
        }
        button {
                border:none;
                padding:0.6em 1.2em;
                background:#388a5a;
                color:#fff;
                font-family:'Lato',Calibri,Arial,sans-serif;
                font-size:1em;
                letter-spacing:1px;
                text-transform:uppercase;
                cursor:pointer;
                display:inline-block;
                margin:3px 2px;
                border-radius:2px;
        }
        button:hover {
                background:#2c774b;
        }
        .info {
                text-align:center;
                font-size:1.5em;
                margin-top:3em;
                clear:both;
                padding:3em 0;
                opacity:0.7;
                color:#aca89a;
        }
        .info a {
                font-weight:700;
                font-size:0.9em;
        }
        @media screen and (max-width:46.0625em) {
                .column {
                width:100%;
                min-width:auto;
                min-height:auto;
                padding:2em;
                text-align:center;
        }
        .column p {
                font-size:1.5em;
        }
        .column:nth-child(2) {
                text-align:center;
                box-shadow:0 -1px 0 rgba(0,0,0,0.1);
        }
        }@media screen and (max-width:25em) {
                .codrops-header {
                font-size:80%;
        }
        .codrops-top {
                font-size:120%;
        }
        .codrops-icon span {
                display:none;
        }
        }*,*:after,*::before {
                -moz-box-sizing:border-box;
                box-sizing:border-box;
        }
        html,body,.st-container,.st-pusher,.st-content {
                height:100%;
        }
        .st-content {
                overflow-y:scroll;
                background:#f3efe0;
        }
        .st-content,.st-content-inner {
                position:relative;
        }
        .st-container {
                position:relative;
                overflow:hidden;
        }
        .st-pusher {
                position:relative;
                left:0;
                z-index:99;
                height:100%;
                -webkit-transition:-webkit-transform 0.5s;
                transition:transform 0.5s;
        }
        .st-pusher::after {
                position:absolute;
                top:0;
                right:0;
                width:0;
                height:0;
                background:rgba(0,0,0,0.2);
                content:'';
                opacity:0;
                -webkit-transition:opacity 0.5s,width 0.1s 0.5s,height 0.1s 0.5s;
                transition:opacity 0.5s,width 0.1s 0.5s,height 0.1s 0.5s;
        }
        .st-menu-open .st-pusher::after {
                width:100%;
                height:100%;
                opacity:1;
                -webkit-transition:opacity 0.5s;
                transition:opacity 0.5s;
        }
        .st-menu {
                position:absolute;
                top:0;
                left:0;
                z-index:100;
                visibility:hidden;
                width:300px;
                height:100%;
                background:#48a770;
                -webkit-transition:all 0.5s;
                transition:all 0.5s;
        }
        .st-menu::after {
                position:absolute;
                top:0;
                right:0;
                width:100%;
                height:100%;
                background:rgba(0,0,0,0.2);
                content:'';
                opacity:1;
                -webkit-transition:opacity 0.5s;
                transition:opacity 0.5s;
        }
        .st-menu-open .st-menu::after {
                width:0;
                height:0;
                opacity:0;
                -webkit-transition:opacity 0.5s,width 0.1s 0.5s,height 0.1s 0.5s;
                transition:opacity 0.5s,width 0.1s 0.5s,height 0.1s 0.5s;
        }
        /* content style */.st-menu ul {
                margin:0;
                padding:0;
                list-style:none;
        }
        .st-menu h2 {
                margin:0;
                padding:1em;
                color:rgba(0,0,0,0.4);
                text-shadow:0 0 1px rgba(0,0,0,0.1);
                font-weight:300;
                font-size:2em;
        }
        .st-menu ul li a {
                display:block;
                padding:1em 1em 1em 1.2em;
                outline:none;
                box-shadow:inset 0 -1px rgba(0,0,0,0.2);
                color:#f3efe0;
                text-transform:uppercase;
                text-shadow:0 0 1px rgba(255,255,255,0.1);
                letter-spacing:1px;
                font-weight:400;
                -webkit-transition:background 0.3s,box-shadow 0.3s;
                transition:background 0.3s,box-shadow 0.3s;
        }
        .st-menu ul li:first-child a {
                box-shadow:inset 0 -1px rgba(0,0,0,0.2),inset 0 1px rgba(0,0,0,0.2);
        }
        .st-menu ul li a:hover {
                background:rgba(0,0,0,0.2);
                box-shadow:inset 0 -1px rgba(0,0,0,0);
                color:#fff;
        }
        /* Individual effects *//* Effect 1:Slide in on top */.st-effect-1.st-menu {
                visibility:visible;
                -webkit-transform:translate3d(-100%,0,0);
                transform:translate3d(-100%,0,0);
        }
        .st-effect-1.st-menu-open .st-effect-1.st-menu {
                visibility:visible;
                -webkit-transform:translate3d(0,0,0);
                transform:translate3d(0,0,0);
        }
        .st-effect-1.st-menu::after {
                display:none;
        }
        /* Effect 2:Reveal */.st-effect-2.st-menu-open .st-pusher {
                -webkit-transform:translate3d(300px,0,0);
                transform:translate3d(300px,0,0);
        }
        .st-effect-2.st-menu {
                z-index:1;
        }
        .st-effect-2.st-menu-open .st-effect-2.st-menu {
                visibility:visible;
                -webkit-transition:-webkit-transform 0.5s;
                transition:transform 0.5s;
        }
        .st-effect-2.st-menu::after {
                display:none;
        }
        /* Effect 3:Push*/.st-effect-3.st-menu-open .st-pusher {
                -webkit-transform:translate3d(300px,0,0);
                transform:translate3d(300px,0,0);
        }
        .st-effect-3.st-menu {
                -webkit-transform:translate3d(-100%,0,0);
                transform:translate3d(-100%,0,0);
        }
        .st-effect-3.st-menu-open .st-effect-3.st-menu {
                visibility:visible;
                -webkit-transition:-webkit-transform 0.5s;
                transition:transform 0.5s;
        }
        .st-effect-3.st-menu::after {
                display:none;
        }
        /* Effect 4:Slide along */.st-effect-4.st-menu-open .st-pusher {
                -webkit-transform:translate3d(300px,0,0);
                transform:translate3d(300px,0,0);
        }
        .st-effect-4.st-menu {
                z-index:1;
                -webkit-transform:translate3d(-50%,0,0);
                transform:translate3d(-50%,0,0);
        }
        .st-effect-4.st-menu-open .st-effect-4.st-menu {
                visibility:visible;
                -webkit-transition:-webkit-transform 0.5s;
                transition:transform 0.5s;
                -webkit-transform:translate3d(0,0,0);
                transform:translate3d(0,0,0);
        }
        .st-effect-4.st-menu::after {
                display:none;
        }
        /* Effect 5:Reverse slide out */.st-effect-5.st-menu-open .st-pusher {
                -webkit-transform:translate3d(300px,0,0);
                transform:translate3d(300px,0,0);
        }
        .st-effect-5.st-menu {
                z-index:1;
                -webkit-transform:translate3d(50%,0,0);
                transform:translate3d(50%,0,0);
        }
        .st-effect-5.st-menu-open .st-effect-5.st-menu {
                visibility:visible;
                -webkit-transition:-webkit-transform 0.5s;
                transition:transform 0.5s;
                -webkit-transform:translate3d(0,0,0);
                transform:translate3d(0,0,0);
        }
        /* Effect 6:Rotate pusher */.st-effect-6.st-container {
                -webkit-perspective:1500px;
                perspective:1500px;
        }
        .st-effect-6 .st-pusher {
                -webkit-transform-origin:0% 50%;
                transform-origin:0% 50%;
                -webkit-transform-style:preserve-3d;
                transform-style:preserve-3d;
        }
        .st-effect-6.st-menu-open .st-pusher {
                -webkit-transform:translate3d(300px,0,0) rotateY(-15deg);
                transform:translate3d(300px,0,0) rotateY(-15deg);
        }
        .st-effect-6.st-menu {
                -webkit-transform:translate3d(-100%,0,0);
                transform:translate3d(-100%,0,0);
                -webkit-transform-origin:100% 50%;
                transform-origin:100% 50%;
                -webkit-transform-style:preserve-3d;
                transform-style:preserve-3d;
        }
        .st-effect-6.st-menu-open .st-effect-6.st-menu {
                visibility:visible;
                -webkit-transition:-webkit-transform 0.5s;
                transition:transform 0.5s;
                -webkit-transform:translate3d(-100%,0,0) rotateY(15deg);
                transform:translate3d(-100%,0,0) rotateY(15deg);
        }
        .st-effect-6.st-menu::after {
                display:none;
        }
        /* Effect 7:3D rotate in */.st-effect-7.st-container {
                -webkit-perspective:1500px;
                perspective:1500px;
                -webkit-perspective-origin:0% 50%;
                perspective-origin:0% 50%;
        }
        .st-effect-7 .st-pusher {
                -webkit-transform-style:preserve-3d;
                transform-style:preserve-3d;
        }
        .st-effect-7.st-menu-open .st-pusher {
                -webkit-transform:translate3d(300px,0,0);
                transform:translate3d(300px,0,0);
        }
        .st-effect-7.st-menu {
                -webkit-transform:translate3d(-100%,0,0) rotateY(-90deg);
                transform:translate3d(-100%,0,0) rotateY(-90deg);
                -webkit-transform-origin:100% 50%;
                transform-origin:100% 50%;
                -webkit-transform-style:preserve-3d;
                transform-style:preserve-3d;
        }
        .st-.........完整代码请登录后点击上方下载按钮下载查看