css+svg仿mac全屏酷炫菜单弹出效果代码
代码语言:html
所属分类:菜单导航
代码描述:css+svg仿mac全屏酷炫菜单弹出效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/snap.svg-min.js"></script> <style> @import url(http://fonts.googleapis.com/css?family=Lato:300,400); *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } body { background: #fff; color: #8a8c7e; font-size: 100%; line-height: 1.25; font-family: 'Lato', 'Avenir Next', Arial, sans-serif; } a { color: #99cc33; text-decoration: none; outline: none; } a:hover, a:focus { color: #373e18; } .codrops-header { margin: 0 auto; padding: 2em 0 0; text-align: center; } .codrops-header h1 { margin: 0; font-weight: 300; font-size: 2.5em; } .codrops-header h1 span { display: block; padding: 0 0 0.6em 0.1em; font-size: 0.6em; opacity: 0.7; } /* To Navigation Style */ .codrops-top { width: 100%; text-transform: uppercase; font-weight: 600; font-size: 0.69em; line-height: 2.2; background: #fff; } .codrops-top a { display: inline-block; padding: 0 1em; text-decoration: none; } .codrops-top span.right { float: right; } .codrops-top span.right a { display: block; float: left; } .codrops-icon:before { margin: 0 4px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'codropsicons'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; } .codrops-icon-drop:before { content: "\e001"; } .codrops-icon-prev:before { content: "\e004"; } .codrops-demos { margin: 30px auto 0; padding: 30px 0; text-align:center; } .codrops-demos a, section button { display: inline-block; background: #a9a9a9; color: #fff; font-weight: 400; padding: 10px 20px; margin: 5px; text-transform: uppercase; border-radius: 2px; letter-spacing: 1px; } .codrops-demos a:hover, .codrops-demos a:active, .codrops-demos a.current-demo { background: #777; } section { padding: 1em 2em 5em; text-align: center; font-size: 1.5em; } section p { max-width: 600px; margin: 0 auto; padding: 20px 0; } section button { border: none; padding: 15px 30px; outline: none; background: #85b91e; } .related > a { border: 1px solid #99cc33; display: inline-block; text-align: center; margin: 20px 10px; padding: 25px; color: #99cc33; opacity: 0.8; -webkit-transition: color 0.3s, border-color 0.3s; transition: color 0.3s, border-color 0.3s; -webkit-backface-visibility: hidden; } .related a:hover { border-color: #82b222; color: #82b222; } .related a img { max-width: 100%; } .related a h3 { margin: 0; padding: 0.5em 0 0.3em; max-width: 300px; text-align: left; font-size: 65%; font-weight: 400; } @media screen and (max-width: 25em) { .codrops-icon span { display: none; } } /* Overlay style */ .overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(153,204,51,0.9); } /* Overlay closing cross */ .overlay .overlay-close { width: 40px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; text-indent: 200%; color: transparent; outline: none; z-index: 100; } /* Menu style */ .overlay nav { text-align: center; position: relative; top: 50%; height: 60%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative; } .overlay ul li { display: block; height: 20%; height: calc(100% / 5); min-height: 54px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .overlay ul li a { font-size: 54px; font-weight: 300; display: block; color: #fff; -webkit-transition: color 0.2s; transition: color 0.2s; } .overlay ul li a:hover, .overlay ul li a:focus { color: #f0f0f0; } /* Effects */ .overlay-genie { background: transparent; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s 0.2s, visibility 0s 0.6s; transition: opacity 0.3s 0.2s, visibility 0s 0.6s; } .overlay-genie.open { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .overlay-genie svg { position: absolute; top: 0; left: 0; } .overlay-genie .overlay-path { fill: rgba(153,204,51,0.9); } .overlay-genie nav { opacity: 0; -webkit-transform: scale(0.8) translateY(-48%); transform: scale(0.8) translateY(-48%); -webkit-transition: opacity 0.3s 0.3s, -webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s, transform 0.3s 0.3s; } .overlay-genie .overlay-close { opaci.........完整代码请登录后点击上方下载按钮下载查看
网友评论0