全屏导航动画特效-html代码-BFW代码库

全屏导航动画特效

代码语言：html

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Fork it! - Navigation &amp; Sub-navigation #codepenchallenge</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.min.css">
<style>
    :root {
  --ccft-cs-background: #000;
  --ccft-cs-on-surface: #fff;
  --ccft-cs-surface: #fff;
  --ccft-cs-primary: hsl(14, 97%, 65%);
  --ccft-cs-primary-alt: hsla(14, 97%, 65%, .3);
  --ccft-ts-primary: Montserrat, sans-serif;
  --ccft-ts-secondary: 'Abril Fatface', serif;
  --ccft-spacer-x: 40px;
  --ccft-spacer-y: 40px;
  --ccft-brand-size: 60px;
}

* {
  box-sizing: border-box;
}

html,
body {
  background-color: var(--ccft-cs-background);
  font-family: var(--ccft-ts-primary);
  margin: 0;
}

.layout {
  background-image: url(https://source.unsplash.com/rf5R1qXwlDU/1600x900);
  background-position: 0 0;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.layout.nav--active main {
  opacity: .2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.layout__backdrop,
.layout__frontdrop {
  background-color: rgba(0, 0, .........完整代码请登录后点击上方下载按钮下载查看