简单的动态导航显示动画效果-html代码-BFW代码库

简单的动态导航显示动画效果

代码语言：html

代码描述：简单的动态导航显示动画效果

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

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

<style>
*{
  padding:0;
  margin:0;
}
body{
  text-transform:uppercase;
  font-family:orbitron, arial;
  font-weight:900;
  background:white;
  color:black;
}
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border-bottom:2px solid black;
}
h1{
  font-size:3.2em;
}
#menu-button{
  width:40px;
  height:40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:fixed;
  z-index:7;
  right:10px;
  cursor:pointer;
}
div{
  width:100%;
  height:20%;
  background:black;
  border:1px solid black;
  transform-origin:right;
}
nav{
  width:100vw;
  height:100vh;
  position:fixed;
  z-index:5;
  display:none;
  place-items:center;
  text-align:center;
  background:silver;
  top:0;
}
ul{
  
}
li{
  font-size:3em;
  list-style:none;
  cursor:pointer;
}
#menu-button:hover >*{
  background:#777777!important;
  border-color:#777777;
}
#menu-button:active >*{
  background:#444444!important;
  border-color:#444444;
}
li:hover{
  color:gray;
  -webkit-text-stroke:1px black;
  transition:.25s;
}
</style>

</head>
<body translate="no">
<header>
<h1>simple<.........完整代码请登录后点击上方下载按钮下载查看