css实现菜单点击锚点页面过渡切换效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现菜单点击锚点页面过渡切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Page Transitions with CSS3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="Your name" /> <link rel="shortcut icon" href="../favicon.ico"> <style> /* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } html,body { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } input{ border:1px solid #b0b0b0; padding:3px 5px 4px; color:#979797; width:190px; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } /* General Demo Style */ body{ font-family: 'Electrolize', Arial, sans-serif; font-weight: 400; font-size: 15px; color: #fff; } a{ text-decoration: none; } .clr{ clear: both; } /* Top Bar Style */ .codrops-top{ line-height: 24px; font-size: 11px; background: rgba(255, 255, 255, 1); text-transform: uppercase; z-index: 9999; position: fixed; top: 0px; left: 0px; width: 100%; height: 24px; box-shadow: 1px 0px 2px rgba(0,0,0,0.2); -webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards; -moz-animation: slideOut 0.5s ease-in-out 0.3s backwards; -o-animation: slideOut 0.5s ease-in-out 0.3s backwards; -ms-animation: slideOut 0.5s ease-in-out 0.3s backwards; animation: slideOut 0.5s ease-in-out 0.3s backwards; } .codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #333; text-shadow: 0px 1px 1px #fff; display: block; float: left; } .codrops-top a:hover{ background: #fff; } .codrops-top span.right{ float: right; } .codrops-top span.right a{ float: left; display: block; } /* Demo Buttons */ #codrops-demos{ position: fixed; z-index: 2000; top: 50px; right: 50px; } #codrops-demos a{ display: inline-block; font-size: 12px; width: 60px; height: 24px; color: #000; line-height: 24px; text-align: center; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); background: rgba(255,255,255,0.9); text-transform: uppercase; } #codrops-demos a:hover{ background: #ddd; color: #000; } #codrops-demos a.current-demo, #codrops-demos a.current-demo:hover{ background: #000; color: #fff; cursor: default; } @-webkit-keyframes slideOut{ 0%{top:-30px; opacity: 0;} 100%{top:0px; opacity: 1;} } @-moz-keyframes slideOut{ 0%{top:-30px; opacity: 0;} 100%{top:0px; opacity: 1;} } @-o-keyframes slideOut{ 0%{top:-30px; opacity: 0;} 100%{top:0px; opacity: 1;} } @-ms-keyframes slideOut{ 0%{top:-30px; opacity: 0;} 100%{top:0px; opacity: 1;} } @keyframes slideOut{ 0%{top:-30px; opacity: 0;} 100%{top:0px; opacity: 1;} } html, body { height:100%; } body { width: 100%; background: #87cfe6; overflow: hidden; } #header{ position: absolute; z-index: 2000; width: 235px; top: 50px; } #header h1{ font-size: 30px; font-weight: 400; text-transform: uppercase; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); padding: 20px; background: #000; } #navigation { margin-top: 20px; width: 235px; display:block; list-style:none; z-index:3; } #navigation a{ color: #444; display: block; background: #fff; background: rgba(255,255,255,0.9); line-height: 50px; padding: 0px 20px; text-transform: uppercase; margin-bottom: 6px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 14px; } #navigation a:hover { background: #ddd; } .content{ right: 40px; left: 280px; top: 0px; position: absolute; padding-bottom: 30px; } .content h2{ font-size: 110px; padding: 10px 0px 20px 0px; margin-top: 52px; color: #fff; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } .content p{ font-size: 18px; padding: 10px; line-height: 24px; color: #fff; display: inline-block; background: black; padding: 10px; margin: 3px 0px; } .panel{ min-width: 100%; height: 98%; overflow-y: auto; overflow-x: hidden; position: absolute; margin-top: -150%; background-color: #87cfe6; box-shadow: 0px 4px 7px rgba(0,0,0,0.6); opacity: 0; z-index:2; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out; } .panel:target{ opacity: 1; margin-top: 0%; } #home:target ~ #header #navigation #link-home, #portfolio:target ~ #header #navigation #link-portfolio, #about:target ~ #header #navigation.........完整代码请登录后点击上方下载按钮下载查看
网友评论0