纯css模仿win8 metro风格开始菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:纯css模仿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=Yanone+Kaffeesatz:400,200); @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700); body { background: #056c86; color: #fff; font-weight: 300; font-size: 1.5em; font-family: 'Lato', Arial, sans-serif; margin:0; padding:0; padding-bottom:40px; } .description{ line-height:40px; } a { color: #b5a4fb; text-decoration: none; } a:hover, a:focus { color: #000; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a, button { outline: none; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .header{ background: #004050; color: #fff; text-align: center; } /* To Navigation Style */ .cctop { background:#056c86; width: 100%; text-transform: uppercase; font-weight: 700; font-size: 0.75em; line-height: 3.2; } .cctop a { display: inline-block; padding: 0 1.5em; text-decoration: none; letter-spacing: 1px; } .cctop span.right { float: right; } .cctop span.right a { display: block; float: left; } /* Header Style */ .ccheader { margin: 0 auto; padding: 2em; text-align: center; } .ccheader h1 { font-size: 2.625em; font-weight: 300; line-height: 1.3; margin: 0; } .ccheader h1 span { display: block; padding: 0 0 0.6em 0.1em; font-size: 60%; opacity: 0.7; } /* Demo Buttons Style */ .codeconvey-demo { padding-top: 1em; font-size: 0.8em; } .codeconvey-demo a { display: inline-block; margin: 0.5em; padding: 0.7em 1.1em; outline: none; border: 2px solid #fff; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .codeconvey-demo a:hover, .codeconvey-demo a.current-demo, .codeconvey-demo a.current-demo:hover { border-color: #333; color: #333; } /* Wrapper Style */ .wrapper{ margin:0 auto; padding-left:12%; padding-right:12%; } .heading{ font-size: 4em; font-weight: 300; margin-bottom: .5em; } .wrap{ width: 830px; height: auto; margin: 70px 0px; float: left; } .fa{ color:#FFFFFF; } div[class^="btn"]{ float: left; margin: 0 10px 10px 0; height: 95px; position: relative; cursor: pointer; transition: all .4s ease; user-drag: element; border: solid 2px transparent; text-align:center; line-height:100px; } div[class^="btn"]:hover{ opacity: 0.7; } div[class^="btn"]:active{ transform: scale(.98,.98); } .btn-big{width: 200px;} .btn-small{width: 95px;} .last{margin-right: 0 !important;} .Start{ color: white; font: normal 50px 'Yanone Kaffeesatz', sans-serif; margin-bottom: 20px; cursor: pointer; user-select: none; transition: all .3s ease; } .Start:hover{ text-shadow: 0 0 4px white; } .space{ margin-bottom: 110px; } .label{ position: absolute; color: white; font: 500 12px sans-serif; left: 10px; user-select: none; } .bottom{bottom: 5px;} .top{top: 5px;} .red{background: #df0024;} .blue{ background: #00a9ec;} .orange{background: #ff9000;} .green{background: #0e5d30;} .purple{background: #8b0189;} .red-light{background: #ce4e4e;} .photo{ background: url('//repo.bfw.wiki/bfwrepo/image/5e4b4000794db.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_95,/quality,q_90'); background-position: -2px -2px; } .gray{ background: #5f5f5f; animation: flip 6s linear infinite; transform: rotateX(0deg); } .green-bright{background: #78d204;} .blue-nav{background: #25478e;} .redish{background: #fe0000;} .yellow{background: #d0d204;} div[class^="icon"]{ width: 45px; height: 45px; margin: 20px auto; background-size: 45px 45px; } ::-webkit-scrollbar{ .........完整代码请登录后点击上方下载按钮下载查看
网友评论0