CSS之Win8界面摸拟

开门见山，先把测试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>

</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界面摸拟的更多相关文章

Javascript摸拟自由落体与上抛运动说明!
JavaScript 代码 //**************************************** //名称:Javascript摸拟自由落体与上抛运动! //作者:Gloot //邮箱 ...
PS游戏摸拟器ePSXe加速游戏速度方法
1.启动ePSXe游戏摸拟器. 2.菜单栏上的设置->视频->在视频设置窗口设置主视频插件->设置. 3.在设置插件的窗口帧速率选择框中勾上使用帧速率限制点选帧速率限制为(10 ...
在ASP.Net中两种利用CSS实现多界面的方法
通过使页面动态加载不同CSS实现多界面(类型于csdn的blog): 方法一: <%@page language="C#"%><%@import namespac ...
html+css的用户注册界面
注册界面样图代码实现 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
HTML+CSS系列:登录界面实现
一.效果二.具体实现 1.index.html <!DOCTYPE html> <html> <head> <meta charset="utf- ...
编写Java程序，通过接口摸拟麦当劳食物生产过程，接口设计
返回本章节返回作业目录需求说明: 通过接口摸拟麦当劳食物生产过程实现思路: 通过接口摸拟麦当劳食物生产过程的实现思路: 创建接口食物(Food),该接口需要被所有的食物类所实现.在该接口中定义g ...
html+css实现登录界面
<!DOCTYPE html> <style type="text/css"> body{ background-color: #555555; } #ti ...
纯CSS画WP8界面
我的手机是诺基亚920,13年4月份买的.工作之余,就想用css做一下WP8的界面效果,如上图所示.不做不知道,一做还挺难的.尤其是画那个QQ 的企鹅图标,太难画了.怎么画都不像. <!doct ...
div+css模仿登录界面
我的代码,这种方式形成了遮罩层,遮罩层的"登录"按钮仍可被点击,非我想要的. <!DOCTYPE html> <html lang="en"& ...

随机推荐

MVC3 Razor模板引擎
http://blog.csdn.net/tiz198183/article/details/8659362 一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母 ...
ElasticSearch中文分词（IK）
ElasticSearch常用的很受欢迎的是IK,这里稍微介绍下安装过程及测试过程. 1.ElasticSearch官方分词自带的中文分词器很弱,可以体检下: [zsz@VS-zsz ~]$ c ...
MVC基本学习
asp.net MVC ViewData详解 http://www.cnblogs.com/gaopin/archive/2012/11/13/2767515.html Asp.net MVC中的Vi ...
get_template_part() 函数详解备忘（转）
最近研究官方主题 Twenty Eleven ,有一些东西网上现成的中文资料不好找,在博客里记载下来,算是分享,也算是备忘,wordpress 3.0 以后就开始便有了get_template_par ...
NOSQL之旅---HBase
最近因为项目原因,研究了Cassandra,Hbase等几个NoSQL数据库,最终决定采用HBase.在这里,我就向大家分享一下自己对HBase的理解. 在说HBase之前,我想再唠叨几句.做互联网应 ...
hibernateTemplate HibernateDaoSupport不建议在Spring与Hibernate整合中使用
HibernateTemplate类属于spring框架中的类 :org.springframework.orm.hibernate3.HibernateTemplate HibernateTempl ...
移植FreeModbus+ModbusMaster+STM32至RT-Thread（初步）
一.项目描述目前操作系统在嵌入式软件行业非常流行,在工控组网方面,以后可能会经常使用到Modbus主机+操作系统.Modbus从机+操作系统甚至Modbus主机+Modbus从机+操作系统.但是操作 ...
Winfrom强大的自动更新程序
推荐一:.Net 小型软件自动更新库(SimpAutoUpdater) http://www.fishlee.net/soft/simple_autoupdater/usage.html 下载地址:h ...
解决ArcGIS Engine AE 读取shapefile中文属性乱码的一条偏方
最近写一个程序,AE+C#,读shp字段属性,其中读到中文就乱码了这个问题比较奇怪,用AE很多年了,怎么突然就乱码呢,用Arcmap打开,没乱码,证明不是数据问题网上搜搜,很多人说是许可初始化的问 ...
Centos上Apache重启，mysql重启, nginx 重启方法
1.重启 apache service httpd restrat /etc/init.d/httpd stop /etc/init.d/httpd start 2.重启 mysql service ...

CSS之Win8界面摸拟

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

随机推荐

热门专题