模仿windows Metro磁贴风格设计菜单弹窗效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：模仿windows Metro磁贴风格设计菜单弹窗效果代码

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


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

<head>

  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
  
<style>
body { margin: 0; background-color: #180053; }
main { width: 960px; position: relative; overflow: hidden; display: block; height: 100vh; margin: auto; font-family: verdana;}

/* Modal Styles */
.modal { width: 100%; height: 100%; }
.modal-dialog { width: 100%; height: 100%; padding: 20px; margin: 0; }
.modal-content { height: 100%;  overflow: hidden; overflow-y: auto;  }
.modal-body { height: 100%; }
.box {
  display: block; 
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 33%;
  height: 50vh;
  float: left;
  padding: 20px;
  border: 5px solid #180053;
  color: #fff;
   background-size: cover;
  opacity: 1;
  transition: width 1s, height 1s, opacity 1s;
  -webkit-transition: width 1s, height 1s, opacity 1s;
}
.box > * { dsplay: block; width: 100%; }
.box i { font-size: 100px; }
.box span { position: absolute; bottom: 10px; left: 10px; text-align: left; font-size: 20px; }

.box1 { width: 60%;}
.box2 { width: 40%; height: 25vh; }
.box3 { width: 40%; height: 25vh; }
.box4 { width: 33.33%; left: 0; }
.box5 { width: 33.33%; right: 0; }
.box6 { width: 33.33%; right: 0; }

.box * {
  transition: opacity 2s;
  -webkit-transition: opacity 2s;

  z-index: 2;
}
.box.active::before {   opacity: 0.02;  }
active * {
  opacity: 1; 
}
.clone { position: absolute; }
.active { position: absolute; 
  width: 100%; 
  height: 100%;

}
.active1 { width: 0; height: 0; opacity: 0; }
.trigger {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #8b7fa9;
  border: 0;
  width: 30px;
  height: 30px;
  z-index: 5;
  font-size: 25px;
  color: #fff;
   transition: width 0.1s, height 1s, opacity 1s, font-size 1s;
  -webkit-transition: width 0.3s, height 0.3s, opacity 0.3s, font-size 0.3s;
}
.trigger:hover {
    width: 35px;
    height: 35px;
    opacity: 0.5;
    font-size: 30px;
    color: #fff;
}
.trigger .fa { 
  position: absolute;
  top: 4px;
  left: 4px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.boxColor1 { background-color: #2776ec; }
.boxColor2 { background-color: #ddca28; }
.boxColor3 { background-color: #00a100; }
.boxColor4 { background-color: #af193f; }
.boxColor5 { background-color: #603cbb; }
.boxColor6 { background-color: #db552d; }

.box.active article { background: #fff; color: #999;  overflow-y: auto;}
.box section { position: relative; }
</style>


</head>

<body translate="no" >
  <main>
  <button class="box box1 boxColor1 btn-modal" data-toggle="modal" data-target="#fsModal">
    <i class="fa fa-bolt"></i>
    <span>Watch Flash Series</span>
  </button>
  <button class="box box2 boxColor2 btn-modal" data-toggle="modal" data-target="#fsModal">
    <i class="fa fa-gamepad"></i>
    <span>Play Dota2 ;-)</span>
  </button>
  <button class="box box3 boxColor3 btn-modal" data-toggle="modal" data-target="#fsModal">
     <i class="fa fa-beer"></i>
     <span>One More Beer</span>
  </button>
  <button class="box box4 boxColor4 btn-modal" data-toggle="modal" data-target="#fsModal">
    <i class="fa fa-pinterest"></i>
    <span>Pinterest</span>
  </button>
  <button class="box box5 boxColor5 btn-modal" data-toggle="modal" data-target="#fsModal">
    <i class="fa fa-heartbeat"></i>
    <span>Loves Is In The Air</span> 
  </button>
  <button class="box box6 boxColor6 btn-modal" data-toggle="modal" data-target="#fsModal">
    <i class="fa fa-road"></i>
    <span>Road Trip</span>
  </button>
</main>
<!-- modal -->
<div id="fsModal" class="modal boxColor1 animated flipInY" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 id="myModalLabel" class="modal-title">Skills</h1>
      </div>
      <div class="modal-body">
        <h2>1. M.........完整代码请登录后点击上方下载按钮下载查看