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

随机推荐

js字符串常用判断方法
转自:http://blog.sina.com.cn/s/blog_6819fa800100j5t6.html 一.方法介绍 function obj$(id) ...
APK的目录结构
APK 包含以下内容: 被编译的代码文件(.dex文件) 文件资源(resources) assets. 证书(certificates) 清单文件(maifestfile) assets 文件 li ...
Linux下C程序的编辑，编译和运行以及调试
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...
HDU 5536 Chip Factory 字典树
Chip Factory Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid= ...
cocos2d-x 3.0环境搭建
原文来自于:http://blog.csdn.net/linzhengqun/article/details/21663341 安装工具 1. 配置JDK JDK下载地址:http://www.ora ...
decide your linux OS is GUI or not
Try: ps -ef|grep X The ps command will display information about a selection of the active process ...
Python的基础--对象转
对象(Objects)是python中数据的抽象,python中所有的数据均可以用对象或者是对象之间的关系来表示.每个对象均有标识符(identity).类型(type).值(value). 标识 ...
动态缓存技术之CSI,SSI,ESI
平常我们谈到网络缓存技术,大多是以页面为单位的,比如,新闻网站中将执行后的结果,缓存为一个静态html文件,下次访问时就直接访问这个静态页面了! 减轻了服务器压力!但是,如果一个页面大部分是可静态的, ...
mysql 批量插入数据过多的解决方法
使用场景: 测试时需要插入100w的数据,跑sql脚本插入非常慢. 存储过程如下: //DELIMITER DROP PROCEDURE if EXISTS createAmountCount; cr ...
关于设置android:imeOptions属性无效的解决办法
在对Android的EditText控件进行设置时,经常会限定一下输入法的属性,设置右下角为完成或者搜索等,一般都会想到android:imeOptions属性,但是仅仅这么设置通常是无效的,还要搭配 ...

CSS之Win8界面摸拟

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

随机推荐

热门专题