jquery实现炫酷按钮点击展开子菜单全屏显示效果代码-html代码-BFW代码库

jquery实现炫酷按钮点击展开子菜单全屏显示效果代码

代码语言：html

代码描述：jquery实现炫酷按钮点击展开子菜单全屏显示效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
          margin: 0;
          padding: 0;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          font-family: 'Lato', sans-serif;
        }
        
        html, body {
          width: 100%;
          height: 100%;
          overflow: hidden;
          position: relative;
        }
        
        body {
          background: url("//repo.bfw.wiki/bfwrepo/image/5e4c71cd307e7.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
        }
        body:before {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          background: rgba(242, 57, 101, 0.2);
        }
        
        span {
          position: absolute;
          left: 5px;
          top: 5px;
          color: #fff;
        }
        span a {
          color: #f23965;
        }
        
        .container {
          width: 250px;
          height: 450px;
          background: #000;
          position: absolute;
          margin: auto;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          padding: 1em;
          overflow: hidden;
          background: url("//repo.bfw.wiki/bfwrepo/image/5e4c71cd307e7.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          z-index: 1;
          padding-top: 60px;
          -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
          box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
        }
        .container.startup {
          animation: startup 1s cubic-bezier(0.19, 1, 0.22, 1);
          -webkit-animation: startup 1s cubic-bezier(0.19, 1, 0.22, 1);
        }
        .container.shake {
          animation: shake 1s cubic-bezier(0.19, 1, 0.22, 1);
          -webkit-animation: shake 1s cubic-bezier(0.19, 1, 0.22, 1);
        }
        .container:before {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          background: -moz-linear-gradient(top, #595d9a 0%, rgba(89, 93, 154, 0) 100%);
          background: -webkit-linear-gradient(top, #595d9a 0%, rgba(89, 93, 154, 0) 100%);
          background: linear-gradient(to bottom, #595d9a 0%, rgba(89, 93, 154, 0) 100%);
        }
        .container i.back {
          position: absolute;
          margin: auto;
          top: 15px;
          right: 10px;
          font-size: 32px;
          line-height: 24px;
          color: #fff;
          z-index: 10;
          opacity: 0;
        }
        .container i.back:hover {
          cursor: pointer;
        }
        .container i.back.show {
          opacity: 1;
        }
        
        h1, p {
          color: #fff;
          font-weight: 300;
        }
        
        .ball {
          width: 50px;
          height: 50px;
          background: #f23965;
          border-radius: 50%;
          position: absolute;
          right: 10px;
          bottom: 10px;
          overflow: hidden;
          transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          /* mentioned by @Bloodysunset */
        }
        .ball:before {
          content: '';
          width: 50px;
          height: 50px;
          position: absolute;
          margin: auto;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          border-radius: 50%;
          background: #b90c35;
          opacity: 0;
          cursor: pointer;
        }
        .ball:hover {
          cursor: pointer;
        }
        .ball.active {
          width: 200px;
          height: 200px;
          bottom: -65px;
          right: -65px;
        }
        .ball.active:hover {
          cursor: default;
        }
        .ball.active:before {
          opacity: 1;
        }
        .ball.active svg {
          transform: rotate(45deg);
          cursor: pointer;
        }
        .ball.active .first {
          top: 20px;
          opacity: 1;
        }
        .ball.active .second {
          top: 40px;
          left: 40px;
          opacity: 1;
        }
        .ball.active .third {
          left: 20px;
          opacity: 1;
        }
        .ball svg {
          position: absolute;
          margin: auto;
     .........完整代码请登录后点击上方下载按钮下载查看