CSS之Win8界面摸拟

时间：2023-03-09 16:35:43
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>

<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 {
 ;
 }