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

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

代码语言：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 * {
  tra.........完整代码请登录后点击上方下载按钮下载查看