纯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-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) rota.........完整代码请登录后点击上方下载按钮下载查看
网友评论0