jquery+css实现视觉差异滚动模糊固定导航条效果代码-html代码-BFW代码库

jquery+css实现视觉差异滚动模糊固定导航条效果代码

代码语言：html

代码描述：jquery+css实现视觉差异滚动模糊固定导航条效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        @import url(https://fonts.googleapis.com/css?family=Lato);
        html, body {
          padding: 0;
          margin: 0;
          height: 100%;

        }
        
        html {
          font: 1em/1.5 "Lato", sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-rendering: optimizelegibility;
        }
        
        body {
          font-size: 1.3em;
        }
        
        header {
          height: 100%;
          position: relative;
          overflow: hidden;
          background: url(//repo.bfw.wiki/bfwrepo/icon/6056bf753c238.jpg) center no-repeat;
          /* Image Credit: Unsplash.me */
          background-size: cover;
        }
        header .content {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1;
        }
        header h1, header h2 {
          margin: 0;
        }
        header h2 {
          text-transform: uppercase;
          margin-top: -.5em;
        }
        header hgroup {
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          display: inline-block;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          color: #fff;
          border: 5px solid #fff;
          padding: .5em 3em;
          background-color: rgba(0, 0, 0, 0.2);
          z-index: 2;
        }
        header .overlay {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          background:#333 center no-repeat;
          background-size: cover;
          z-index: 0;
          opacity: 0;  -webkit-filter: blur(4px);
        }
        img{
          margin-right:20px
        }
        .site {
          padding: 20em 0;
          text-align: center;
          background-color: #efefef;
          font-size: .8em;
          color: #444;
          position:relative
        }
        .site a {
          color: #666;
          text-decoration: none;
        }
        .site a:hover {
          color: #222;
        }
        
        .site nav{
          position:absolute;
          top:0;
          left:0;
          background:#222;
          width:100%
        }
        .site nav a{
          padding:10px 30px;
          font-size:1.3em;
          display:inline-block
        }
        .site nav a:hover{
          background:#333;
          color:#fff
        }
    </style>



</head>

<body>
    <header>
        <div class="content">
            <hgroup>
                <h1>LOGO</h1>
                <i>slogan</i>
            </hgroup>
        </div>
        <div class="overlay"></div>
    </header>
    <section class="site">
        <nav>
            <a href="">Home</a>
            <a href="">About</a>
            <a href="">Contact</a>
            <.........完整代码请登录后点击上方下载按钮下载查看