开门见山，先把测试Result放上：

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Win8 Metro</title>
<link rel="stylesheet" type="text/css"

href="http://files.cnblogs.com/files/caidupingblogs/WIN8reset.css" />
<link rel="stylesheet" type="text/css"

href="http://files.cnblogs.com/files/caidupingblogs/WIN8default.css">
<link rel='stylesheet' href='http://files.cnblogs.com/files/caidupingblogs/font-

awesome.min.css'>
<link rel="stylesheet" type="text/css"

href="http://files.cnblogs.com/files/caidupingblogs/WIN8styles.css">
</head>
<body>
<article class="zzsc-container">
<br><br><br>
<ul class="metro">

<li><i class="fa fa-

gamepad"></i><span>Games</span></li>
<li><i class="fa fa-

cogs"></i><span>Settings</span></li>
<li><i class="fa fa-envelope-

o"></i><span>Email</span></li>
<li><i class="fa fa-comments-

o"></i><span>Messages</span></li>
<li><i class="fa fa-

music"></i><span>Music</span></li>
<li><i class="fa fa-heart-

o"></i><span>Favorites</span></li>
<li><i class="fa fa-picture-

o"></i><span>Photos</span></li>

</ul>

<div class="box">
<span class="close"></span>
<p></p>
</div>
</article>

<script src="http://files.cnblogs.com/files/caidupingblogs/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var $box = $('.box');
$('.metro li').each(function () {
var color = $(this).css('backgroundColor');
var content = $(this).html();
$(this).click(function () {
$box.css('backgroundColor', color);
$box.addClass('open');
$box.find('p').html(content);
});
$('.close').click(function () {
$box.removeClass('open');
$box.css('backgroundColor', 'transparent');
});
});
});

</script>
</body>

今天看到了一个摸拟Win8界面的设计，觉得非常有意思，并且方法也并不难，就研究了一下记录之。主要方法如下:

$(document).ready(function () {
    var $box = $('.box');
    $('.metro li').each(function () {
        var color = $(this).css('backgroundColor');
        var content = $(this).html();
        $(this).click(function () {
            $box.css('backgroundColor', color);
            $box.addClass('open');
            $box.find('p').html(content);
        });
        $('.close').click(function () {
            $box.removeClass('open');
            $box.css('backgroundColor', 'transparent');
        });
    });
});

styles.css：

 @import url(http://fonts.useso.com/css?family=Montserrat:400,700);

 body {
     background: #363B48;
     font-family: Montserrat;
     overflow:hidden;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 h2 {
   margin:150px auto 50px;
   text-align:center;
   font-size:18px;
   text-transform:uppercase;
   background:#2e333f;
   padding:25px;
   display:block;
   cursor:default;
   width:370px;
   color:#cacaca;
   border:1px solid rgba(173, 173, 173, 0.15);
 }

 .metro {
     width: 630px;
     margin: 0 auto 0;
 }

 .metro li {
     -webkit-transform: perspective(600px);
     -webkit-transform-style: preserve-3d;
     -webkit-transform-origin-x: 50%;
     -webkit-transform-origin-y: 50%;
     -ms-transform: perspective(600px);
     -ms-transform-style: preserve-3d;
     -ms-transform-origin-x: 50%;
     -ms-transform-origin-y: 50%;
     transform: perspective(600px);
     transform-style: preserve-3d;
     transform-origin-x: 50%;
     transform-origin-y: 50%;
     cursor: default;
     position: relative;
     text-align: center;
     margin: 0 10px 10px 0;
     width: 150px;
     height: 150px;
     color: #ffffff;
     float: left;
     -webkit-transition: .2s -webkit-transform, 1s opacity;
     -ms-transition: .2s -ms-transform, 1s opacity;
     transition: .2s transform, 1s opacity;
     cursor:pointer;
 }

 .metro li i {
     font-size: 54px;
     margin: 35px 0 0;
 }

 .metro li span {
     color: rgba(255, 255, 255, 0.8);
     text-transform: uppercase;
     position: absolute;
     left: 15px;
     bottom: 15px;
     font-size: 14px;
 }

 .metro li:first-child {
     background: #00b6de;
 }

 .metro li:nth-child(2) {
     background: #56dea7;
     width: 310px;
 }

 .metro li:nth-child(3) {
     background: #ff7659;
 ;
 }

 .metro li:nth-child(4) {
     background: #f8cd36;
 }

 .metro li:nth-child(5) {
     background: #f26175;
 }

 .metro li:nth-child(6) {
     background: #5ca7df;
 }

 .metro li:last-child {
     background: #9e7ac2;
 ;
 }

 .metro li:nth-child(5):active, .metro li:first-child:active {
     -webkit-transform: scale(0.95);
     -ms-transform: scale(0.95);
     transform: scale(0.95);
 }

 .metro li:nth-child(7):active, .metro li:nth-child(2):active {
     -webkit-transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
     -ms-transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
     transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
 }

 .metro li:nth-child(3):active {
     -webkit-transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
     -ms-transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
     transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
 }

 .metro li:nth-child(4):active {
     -webkit-transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
     -ms-transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
     transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
 }

 .metro li:nth-child(6):active {
     -webkit-transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
     -ms-transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
     transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
 }

 /* POPUP */

 .box {
     display: table;
 ;
     visibility: hidden;
     -webkit-transform: perspective(1200px) rotateY(180deg) scale(0.1);
     -ms-transform: perspective(1200px) rotateY(180deg) scale(0.1);
     transform: perspective(1200px) rotateY(180deg) scale(0.1);
 ;
 ;
     z-index: -1;
     position: absolute;
     width: 100%;
     height: 100%;
 ;
     transition: 1s all;
 }

 .box p {
     display: table-cell;
     vertical-align: middle;
     font-size: 64px;
     color: #ffffff;
     text-align: center;
 ;
 ;
     transition: .2s;
     -webkit-transition-delay: 0.2s;
     -ms-transition-delay: 0.2s;
     transition-delay: 0.2s;
 }

 .box p i {
     font-size: 128px;
     margin:0 0 20px;
     display:block;
 }

 .box .close {
   display:block;
   cursor:pointer;
   border:3px solid rgba(255, 255, 255, 1);
   border-radius:50%;
   position:absolute;
   top:50px;
   right:50px;
   width:50px;
   height:50px;
   -webkit-transform:rotate(45deg);
   -ms-transform:rotate(45deg)
   transform:rotate(45deg);
   transition: .2s;
   -webkit-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
 ;
 }

 .box .close:active {
     top:51px;
 }

 .box .close::before {
   content: "";
   display: block;
   position: absolute;
   background-color: rgba(255, 255, 255, 1);
   width: 80%;
   height: 6%;
   left: 10%;
   top: 47%;
 }

 .box .close::after {
   content: "";
   display: block;
   position: absolute;
   background-color: rgba(255, 255, 255, 1);
   width: 6%;
   height: 80%;
   left: 47%;
   top: 10%;
 }

 .box.open {
 ;
 ;
     visibility: visible;
 ;
 ;
     -webkit-transform: perspective(1200px) rotateY(0deg) scale(1);
     -ms-transform: perspective(1200px) rotateY(0deg) scale(1);
     transform: perspective(1200px) rotateY(0deg) scale(1);
     width: 100%;
     height: 100%;
 }

 .box.open .close, .box.open p {
 ;
 }

CSS之Win8界面摸拟的更多相关文章

  1. Javascript摸拟自由落体与上抛运动 说明!

    JavaScript 代码 //**************************************** //名称:Javascript摸拟自由落体与上抛运动! //作者:Gloot //邮箱 ...

  2. PS游戏摸拟器ePSXe加速游戏速度方法

    1.启动ePSXe游戏摸拟器. 2.菜单栏上的设置->视频->在视频设置窗口 设置主视频插件->设置. 3.在设置插件的窗口帧速率选择框中 勾上使用帧速率限制 点选帧速率限制为(10 ...

  3. 在ASP.Net中两种利用CSS实现多界面的方法

    通过使页面动态加载不同CSS实现多界面(类型于csdn的blog): 方法一: <%@page language="C#"%><%@import namespac ...

  4. html+css的用户注册界面

    注册界面样图 代码实现 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. HTML+CSS系列:登录界面实现

    一.效果 二.具体实现 1.index.html <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  6. 编写Java程序，通过接口摸拟麦当劳食物生产过程，接口设计

    返回本章节 返回作业目录 需求说明: 通过接口摸拟麦当劳食物生产过程 实现思路: 通过接口摸拟麦当劳食物生产过程的实现思路: 创建接口食物(Food),该接口需要被所有的食物类所实现.在该接口中定义g ...

  7. html+css实现登录界面

    <!DOCTYPE html> <style type="text/css"> body{ background-color: #555555; } #ti ...

  8. 纯CSS画WP8界面

    我的手机是诺基亚920,13年4月份买的.工作之余,就想用css做一下WP8的界面效果,如上图所示.不做不知道,一做还挺难的.尤其是画那个QQ 的企鹅图标,太难画了.怎么画都不像. <!doct ...

  9. div+css模仿登录界面

    我的代码,这种方式形成了遮罩层,遮罩层的"登录"按钮仍可被点击,非我想要的. <!DOCTYPE html> <html lang="en"& ...

随机推荐

  1. SQLite多线程写锁文件解决方案

    在sqlite编程中多线程同时写时会出现异常,我写了个类来解决这个问题. 思路很简单,就是在开始写操作时,记下写操作的托管线程id,表示目前有线程正在做写操作:其他线程来写时,需要先检测是否有进程正在 ...

  2. ags模版与vs

    esri为每个版本的sdk指定了特定的vs开发版本,比如ags10.0,ags10.1指定的是vs2008和vs2010,大概是因为发布时间的关系. 无论如何,我们可以将模版移植到新的vs下.(注意红 ...

  3. 使用Unity制作游戏关卡的教程（一）

    转自: http://gamerboom.com/archives/74131 作者:Matthias Zarzecki 我正在制作<Looking For Group – The Fork O ...

  4. socket.io+angular.js+express.js做个聊天应用(一)

    node,express开发环境等安装如果已经搞好了. justhacker@justhacker-ThinkPad-Edge-E440:~/projects/nodejs$ express -e c ...

  5. 配置集群Nginx+Memcached+Tomcat集群配置

    上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下配置集群 1.   Nginx Nginx是通过将多个Web Server绑定到同一个IP地址下,以实现多个WebS ...

  6. git 与 github 最简单的用法

    今天发现cygwin里已经装了git,所以顺便测试一下git是怎么用的. 大概最简单的用法是这样的: 1.在github创建一个repository.复制右边那个 HTTPS clone URL 2. ...

  7. Codeforces Round #334 (Div. 2) C. Alternative Thinking 贪心

    C. Alternative Thinking Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/6 ...

  8. codeforces Gym 100500 J. Bye Bye Russia

    Problem J. Bye Bye RussiaTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/1005 ...

  9. BZOJ 3931: [CQOI2015]网络吞吐量 最大流

    3931: [CQOI2015]网络吞吐量 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...

  10. URAL 1776 C - Anniversary Firework DP

    C - Anniversary FireworkTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/c ...