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

代码语言:html

所属分类:布局界面

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

代码标签: 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;
  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0