jquery模仿win8 metra风格全屏菜单效果代码-html代码-BFW代码库

jquery模仿win8 metra风格全屏菜单效果代码

代码语言：html

代码描述：jquery模仿win8 metra风格全屏菜单效果代码，鼠标放上去有动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  
  
  
<style>
body{
	background: #12151c;
	margin: 0;
	height: 100%;
  -moz-transform: scale(0.75, 0.75);
    zoom: 0.75; 
    zoom: 75%;
}
.container{
	width: 1200px;
  margin: auto;
	margin-top: 90px;
}
.mail{
	width: 245px;
	height: 120px;
	background: #0079C9;
	position: relative;
}
.mail:hover{
	outline: 2px solid #5c5f6a;
}
.mailIcon{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 45px;
	color: #FFF;
}
.mailmail{
	color: #FFF;
	position: relative;
	top: 95px;
	left: 15px;
	font-family: Segoe UI, helvetica-neue;
	font-weight: 100;
	letter-spacing: 0.8px;
	font-size: 14px;
	cursor: default;
}

.skype{
	width: 120px;
	height: 120px;
	background: #00BEF2;
	position: relative;
	top: 5px;
	
}
.skype:hover{
	outline: 2px solid #5c5f6a;
}
.skypeIcon{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 45px;
	color: #FFF;
}
.skypeskype{
	color: #FFF;
	position: relative;
	top: 95px;
	left: 10px;
	font-family: Segoe UI, helvetica-neue;
	font-weight: 100;
	font-size: 14px;
	letter-spacing: 0.8px;
	cursor: default;
}

.map{
	width: 120px;
	height: 120px;
	background: #A400AB;
	position: relative;
	left: 126px;
	top: -115px;
}
.map:hover{
	outline: 2px solid #5c5f6a;
}
.mapIcon{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 45px;
	color: #FFF;
}
.mapmap{
	color: #FFF;
	position: relative;
	top: 95px;
	left: 10px;
	font-family: Segoe UI, helvetica-neue;
	font-weight: 100;
	font-size: 14px;
	letter-spacing: 0.8px;
	cursor: default;
}
.read{
	width: 120px;
	height: 120px;
	background: #BC1E49;
	position: relative;
	top: -110px;
}
.read:hover{
	outline: 2px solid #5c5f6a;
}
.readIcon{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	color: #FFF;
}
.readread{
	color: #FFF;
	position: relative;
	top: 95px;
	left: 10px;
	font-family: Segoe UI, helvetica-neue;
	font-size: 13px;
	letter-spacing: 0.8px;
	cursor: default;
}
.desktop{
	width: 245px;
	height: 120px;
	background: #0079C9;
	position: relative;
	top: -105px;
}
.desktop:hover{
	outline: 2px solid #5c5f6a;
}
.desktopIc.........完整代码请登录后点击上方下载按钮下载查看