纯css模仿win8 metro风格菜单点击弹出层效果代码
代码语言:html
所属分类:菜单导航
代码描述:纯css模仿win8 metro风格菜单点击弹出层效果代码
代码标签: win8 metro 风格 菜单 点击 弹出 层 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body {
background: #363B48;
font-family: Montserrat;
overflow:scroll;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 900px;
}
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: 100px auto;
list-style-type: none;
}
.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-chi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0