bootstrap实现全屏滚动时间线刻度文字导航效果代码
代码语言:html
所属分类:菜单导航
代码描述:bootstrap实现全屏滚动时间线刻度文字导航效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> .wrapper { min-height: 100vh; font-family: "Roboto Slab", serif; font-weight: 300; color: #fff; position: relative; } section { height: 100vh; font-size: 40px; font-weight: 100; background-color: #22A7F0; display: flex; justify-content: center; align-items: center; } section:nth-child(1) { background: white; } section:nth-child(2) { background: #F64747; } section:nth-child(3) { background: #22A7F0; } section:nth-child(4) { background: #F9690E; } section:nth-child(5) { background: #9B59B6; } section:nth-child(6) { background: #03C9A9; } section:nth-child(7) { background: #ffcc00; } .nav__wrapper { position: fixed; height: 100%; padding: 30px; display: flex; flex-flow: column nowrap; justify-content: flex-end; } .nav { margin: 0 0 100px 30px; } .nav__counter { font-size: 24px; transition: all 0.15s ease-out; } .nav__title { font-size: 32px; font-weight: 300; margin: 0 0 0.25em; width: 300px; height: 0; overflow: hidden; opacity: 0; transition: height 0.3s ease-out, opacity 0.2s ease-out; } .nav__body { font-weight: 100; font-size: 18px; font-size: 18px; width: 300px; height: 0; overflow: hidden; opacity: 0; transition: height 0.3s ease-out, opacity 0.2s ease-out; } .nav li { position: relative; transition: all 0.3s ease-out; margin-bottom: 1em; } .nav li:after { content: ""; display: block; border-left: 2px solid white; border-top: 2px solid white; height: 250px; width: 20px; position: absolute; left: -30px; top: 15px; } .nav li a { display: block; padding: 0; color: #fff; transition: all 0.15s ease-out; } .nav li a:hover { background-color: transparent; padding-left: 1em; } .nav li a:focus { background-color: transparent; } .nav li.active { pointer-events: none; padding-left: 1em; } .nav li.active:after { width: 35px; height: 400px; top: 35px; } .nav li.active .nav__counter { font-size: 48px; } .nav li.active .nav__title { height: 40px; opacity: 1; overflow: visible; } .nav li.active .nav__body { height: 100px; opacity: 1; overflow: visible; } </style> </head> <body data-spy="scroll" data-target="#navbar-example"> <div class="wrapper" > <nav class="nav__wrapper" id="navbar-example"> <ul class="nav"> <li role="presentation" class="active"> <a href="#section1"> <span class="nav__counter">01</span> <h3 class="nav__title">Intro</h3> <p class="nav__body"><strong>Timeline-style navigation</strong>. Scroll down to see what happens, or click on a number in the nav.</p> </a> </li> <li role="presentation"> <a href="#section2"> <span class="nav__counter">02</span> <h3 class="nav__title">Section 2 Titl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0