全屏导航动画切换效果-html代码-BFW代码库

全屏导航动画切换效果

代码语言：html

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

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

<title>Fullscreen Nav - Vertical -  Variable fonts &amp; linear-gradients</title>

<style>
  @import url("https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap");
.nav {
  position: absolute;
  z-index: 998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  transition-property: visibility;
}
.nav .navList {
  width: 100%;
  height: 100%;
  display: flex;
  transition: all 1s;
}
.nav .navList a {
  margin: 0.1em;
  display: block;
  text-decoration: none;
  color: #ffffff88;
  letter-spacing: 1px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 85vh;
  box-shadow: 10px 10px 20px #000;
  transition: -webkit-transform 0.5s cubic-bezier(0.15, 0.1, 0.25, 1.3);
  transition: transform 0.5s cubic-bezier(0.15, 0.1, 0.25, 1.3);
  transition: transform 0.5s cubic-bezier(0.15, 0.1, 0.25, 1.3), -webkit-transform 0.5s cubic-bezier(0.15, 0.1, 0.25, 1.3);
  background-color: #222;
}
.nav .navList a span {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  position: absolute;
  -webkit-animation: textBG 10s infinite;
          animation: textBG 10s infinite;
  font-size: 5vh;
  font-variation-settings: "wdth" 110, "wght" 800;
  transition: all 0..........完整代码请登录后点击上方下载按钮下载查看