Win8 Metro风格界面特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Win8 Metro风格界面特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<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="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel='stylesheet' href='css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/styles.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="js/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>
</html>

CSS代码(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;margin:0;}
.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;margin:0;}
.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;top:0;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);top:0;left:0;z-index:-1;position:absolute;width:100%;height:100%;opacity:0;transition:1s all;}
.box p{display:table-cell;vertical-align:middle;font-size:64px;color:#ffffff;text-align:center;margin:0;opacity:0;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;opacity:0;}
.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{left:0;top:0;visibility:visible;opacity:1;z-index:999;-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{opacity:1;}

附件:下载该文件资源,减少时间成本(增值服务)