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.........完整代码请登录后点击上方下载按钮下载查看