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"& ...

随机推荐

Asp.net MVC @Html.DisplayNameFor中文乱码解决办法
这是utf8的问题,vs2015默设要用utf8编码,以前的gb2312皆会产生乱码这问题还是会继续发生,因为常会复制旧程序档进新方案.它会出现很奇怪的错误,而不是这么明显的乱码,你怎么抓bug都抓 ...
SAP BW 例程（Routine）【开始例程、关键值或特性的例程、结束例程】
定义可以使用例程定义关键值或特性的复杂的转换规则. 例程是本地 ABAP 类,它们包括预定义的定义和实施范围.进站和出站参数的 TYPES及方法签名都存储在定义范围中.实际例程创建于实施范围中.使用 ...
Codeforces Gym 100500F Problem F. Door Lock 二分
Problem F. Door LockTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100500/at ...
Communications link failure报错的处理
一.报错的问题: 测试环境在做压力测试的时候爆出错误 com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications l ...
javascript常用方法整理--数组篇
1. arrayObject.slice(start,end) 从已有的数组中返回选定的元素参数描述 start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说 ...
Word2010 清除样式
使用场景有时候我们在网页上面粘贴一些精华文章或者从去整理别人已经完成的word的时候,会发现它自带的格式,可能并不是我们所理想的格式,所以此时就不得不去重新编辑其格式,但是word里 ...
关于“学习Linux用什么系统”的解答
首先,阐述一下,我个人的观点——这个问题我曾经也想了很久了,这绝不是长篇大论后就是简单一句,适合你的就是最好的.其实,很多人看到这一句,心里已经有成千上万个奔腾了(至少我当时是这样的),为什么?因为我 ...
Java SE ---数据类型
Java中数据类型(Data Type)分为基本数据类型(Primitive Data Type)和引用类型(Reference Data Type). Java中的基本数据类型共有以下8种: 1 ...
[Java] HashMap、TreeMap、Hashtable排序
Java中对Map(HashMap,TreeMap,Hashtable等)的排序时间首先简单说一下他们之间的区别: HashMap: 最常用的Map,它根据键的HashCode 值存储数据,根据键可 ...
Windows 平台下Git 服务器搭建
由于项目中一直在使用git作为版本管理,自己对git的理解.使用都还不是怎么的熟悉,所以准备深入了解一下git及一些常用命令的使用,于是干脆把服务端架上,通过自己的PC作为服务端同时作为客户端的角色进 ...

CSS之Win8界面摸拟

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

随机推荐

热门专题