全屏菜单弹出效果-html代码-BFW代码库

代码语言：html

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

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

<style>
html, body {
  max-height: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue","Helvetica",Arial,sans-serif;
  background: #ee0979;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #ff6a00, #ee0979);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

* {
  box-sizing: border-box;
}

#menu-toggle {
  position: fixed;
  transform: translateX(-500px);
}
#menu-toggle:checked ~ .hamburger > span:first-child {
  transform: translateY(8px) rotate(45deg);
}
#menu-toggle:checked ~ .hamburger > span:nth-child(2) {
  opacity: 0;
}
#menu-toggle:checked ~ .hamburger > span:last-child {
  transform: translateY(-8px) rotate(-45deg);
}
#menu-toggle:checked ~ .wrapper {
  overflow: hidden;
}
#menu-toggle:checked ~ .wrapper nav {
  transform: translateX(0);
}
#menu-toggle:checked ~ .wrapper nav ul li {
  opacity: 1;
  transform: translateY(0);
}
#menu-toggle:checked ~ .wrapper .page-content {
  filter: blur(5px);
  opacity: .2;
}

.wrapper {
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.page-content {
  display: block;
  transition: .5s ease-in-out;
}

.page-content {
  background: white;
  padding: 80px 20px 20px 20px;
}
.page-content p {
  margin: 0 auto 20px auto;
  max-width: 800px;
}
.page-content p:last-child {
  margin-bottom: 0;
}

.hamburger {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  height: 40px;
  width: 40px;
  border-radius: 5px;
  backdrop-filter: blur(5px);
}
.hamburger > span {
  display: block;
  width: calc(100% - 16px);
  height: 4px;
  background: black;
  border-radius: 4px;
  position: absolute;
  left: 8px;
  transition: .25s ease-in-out;
}
.hamburger > span:first-child {
  top: 10px;
}
.hamburger > span:nth-child(2) {
  top: 18px;
}
.hamburger > span:last-child {
  top: 26px;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transform: translateY(100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
nav ul li {
  font-size: 25px;
  line-height: 50px;
  opacity: 0;
  transform: translateY(100px);
  transition: .4s ease-in-out;
}
nav ul li a {
  display: block;
  text-decoration: none;
  color: white;
}
nav ul li:first-child {
  transition-delay: .1s;
}
nav ul li:nth-child(2) {
  transition-delay: .2s;
}
nav ul li:nth-child(3) {
  transition-delay: .3s;
}
nav ul li:nth-child(4) {
  transition-delay: .4s;
}
</style>

</head>
<body translate="no">
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="hamburger">
<span></span>
<span></span>
<span></span>
</label>
<div class="wrapper">
<nav>
<ul>
<li><a href="#0">Home</a></li>
<li><a href="#0">About</a></li>
<li><a href="#0">Contact</a></li>
<li><a href="#0">Dance</a></li>
</ul>
</nav>
<section class="page-content">
<p>Hey, you know how I'm, like, always trying to save the planet? Here's my chance. I was part of something special. Checkmate... Hey, take a look at the earthlings. Goodbye! What do they got in there? King Kong? God help us, we're in the hands of engineers.</p><p>God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Must go faster... go, go, go, go, go! What do they got in there? King Kong? So you two dig up, dig up dinosaurs? Hey, you know how I'm, like, always trying to save the planet? Here's my chance.</p><p>My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? You really think you can fly that thing? Must go faster... go, go, go, go, go!</p><p>So you two dig up, dig up dinosaurs? Jaguar shark! So tell me - does it really exist? Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? Jaguar shark! So tell me - does it really exist? Yes, Yes, without the oops! Do you have any idea how long it takes those cups to decompose.</p><p>I gave it a cold? I gave it a virus. A computer virus. Just my luck, no ice. Eventually, you do plan to have dinosaurs on your dinosaur tour, right? They're using our own satellites against us. And the clock is ticking. Hey, take a look at the earthlings. Goodbye!</p><p>Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Hey, take a look at the earthlings. Goodbye! Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.</p><p>You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.</p><p>.........完整代码请登录后点击上方下载按钮下载查看

全屏菜单弹出效果

网友评论0

div+css实现漂亮的垂直侧边栏可伸缩菜单效果代码

div+css实现底部横线菜单切换窗口效果代码

div+css实现横向鼠标悬停翻转文字导航菜单效果代码

react+use-web-animations实现横向和竖向图标菜单滑动效果代码

js+css实现滑动图标导航菜单效果代码

matter实现自由落体重力下落的导航菜单效果代码

div+css实现下拉菜单代码

div+css实现左侧悬浮伸缩菜单代码

div+Css实现手风琴二级菜单折叠效果代码

div+css实现二级下拉菜单导航效果代码