css实现菜单伸缩折叠打开动画效果代码-html代码-BFW代码库

css实现菜单伸缩折叠打开动画效果代码

代码语言：html

代码描述：css实现菜单伸缩折叠打开动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        *, *:before, *:after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html, body {
      height: 100%;
    }
    
    body:before, body:after {
      content: "";
      display: block;
      height: 50%;
      background: #00bdea;
    }
    body:after {
      background: #208FF9;
    }
    
    /* MAIN VARIABLES FOR CUSTOMIZATION */
    /* -------------------------------- */
    .nav {
      overflow: hidden;
      position: absolute;
      left: 50%;
      top: 50%;
      width: auto;
      height: 90px;
      margin-top: -45px;
      background: #fff;
      border-radius: 5px;
      -webkit-transform: translate3d(-50%, 0, 0);
              transform: translate3d(-50%, 0, 0);
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
    }
    .nav__cb {
      z-index: -1000;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      pointer-events: none;
    }
    .nav__content {
      position: relative;
      width: 90px;
      height: 100%;
      -webkit-transition: width 1s cubic-bezier(0.49, -0.3, 0.68, 1.23);
      transition: width 1s cubic-bezier(0.49, -0.3, 0.68, 1.23);
    }
    .nav__cb:checked ~ .nav__content {
      -webkit-transition: width 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
      transition: width 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
      width: 410px;
    }
    .nav__items {
      position: relative;
      width: 410px;
      height: 100%;
      padding-left: 20px;
      padding-right: 110px;
      list-style-type: none;
      font-size: 0;
    }
    .nav__item {
      display: inline-block;
      vertical-align: top;
      width: 70px;
      text-align: center;
      color: #6C7784;
      font-size: 14px;
      line-height: 90px;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      -webkit-perspective: 1000px;
              perspective: 1000px;
      -webkit-transition: color 0.3s;
      transition: color 0.3s;
      cursor: pointer;
    }
    .nav__item:hover {
      color: #00bdea;
    }
    .nav__item-text {
      display: block;
      height: 100%;
      -webkit-transform: rotateY(-70deg);
              transform: rotateY(-70deg);
      opacity: 0;
      -webkit-transition: opacity 0.7s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
      transition: opacity 0.7s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
      transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.7s;
      transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.7s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
    }
    .nav__cb:checked ~ .nav__content .nav__item-text {
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
      opacity: 1;
      -webkit-transition: opacity 0.2s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
      transition: opacity 0.2s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
      transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.2s;
      transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.2s, -webkit-transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5);
    }
    .nav__item:nth-child(1) .nav__item-text {
      -webkit-transition-delay: 0.3s.........完整代码请登录后点击上方下载按钮下载查看