全屏导航动画特效-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, 0, .3);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: fixed;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  width: 100%;
  z-index: 0;
}

.layout__backdrop {
  -webkit-transform: scaleX(.34) translateX(calc(67% * 3));
          transform: scaleX(.34) translateX(calc(67% * 3));
}

.layout.nav--active .layout__frontdrop {
  background-color: var(--ccft-cs-primary-alt);
  visibility: visible;
}

.layout__frontdrop {
  opacity: 0;
  visibility: hidden;
  z-index: 2;
}

.layout__wrapper {
  display: grid;
  grid-template-columns: 300px repeat(3, 1fr);
  margin: auto;
  height: 100%;
}

.layout__main {
  transition: opacity .3s;
  z-index: 1;
}

.hero {
  padding-top: 10rem;
}

.hero-title {
  color: #fff;
  font-family: var(--ccft-ts-secondary);
  font-weight: 400;
  font-size: 4.75rem;
  line-height: 1.2;
  margin-left: auto;
  margin-right: 5rem;
  margin-bottom: 0;
  position: relative;
  width: 32.5rem;
  z-index: 1;
}

.hero-title em {
  display: bl.........完整代码请登录后点击上方下载按钮下载查看