弹出玻璃模糊菜单动画效果
代码语言：html
所属分类：菜单导航
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Frosted Glass Menu | [best in chrome]</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap'>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
position: relative;
width: 100%;
height: 100vh;
font-family: "Montserrat";
background-image: url("http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png");
background-size: cover;
overflow: hidden;
z-index: 1;
}
body::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.35);
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255, 255, 255, 0.8);
font-size: 3rem;
text-transform: uppercase;
letter-spacing: 5px;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
white-space: nowrap;
z-index: 3;
}
nav {
--transition-time: 500ms;
position: relative;
width: 400px;
height: 100%;
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(20px);
transform: translateX(-100%);
transition: all 800ms cubic-bezier(0.8, 0, 0.33, 1);
z-index: 4;
}
nav a {
text-transform: uppercase;
font-size: 1.4rem;
font-weight: 900;
letter-spacing: 3px;
text-decoration: none;
user-select: none;
color: #fff;
}
nav .nav-links {
--link-height: 60px;
position: relative;
width: 100%;
}
nav .nav-links li {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: var(--link-height);
list-style: none;
opacity: 0;
transform: translateX(-50%);
transition: all var(--transition-time) cubic-bezier(0.8, 0, 0.33, 0.9);
transition-delay: calc(20ms + var(--delay));
cursor: pointer;
z-index: 8;
}
nav .nav-links li:hover {
color: rgba(255, 255, 255, 0.85);
}
nav .nav-links li a {
pointer-events: none;
}
nav .nav-links li ol {
display: none;
}
nav .nav-links .hover-el {
position: absolute;
width: 100%;
height: var(--link-height);
top: var(--y);
left: var(--x);
opacity: 0;
background: radial-gradient(circle at var(--mousex) var(--mousey), rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
pointer-events: none;
z-index: 5;
}
nav .sub-menu {
--link-height: 60px;
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
}
nav .sub-menu ol {
list-style: none;
}
nav .sub-menu ol li {
display: flex;
justify-content: center;
align-items: center;
height: var(--link-height);
transition: all var(--transition-time) ease;
transition-delay: calc(80ms + var(--delay));
cursor: pointer;
}
nav .sub-menu ol li:hover {
background: rgba(0, 0, 0, 0.25);
}
nav .sub-menu ol li.off-menu {
opacity: 0;
transform: translateY(30%);
}
nav .sub-menu ol li.on-menu {
opacity: 1;
transform: translateY(0%);
}
nav .sub-menu ol li a {
font-size: 1.2rem;
font-weight: normal;
}
nav .sub-menu-btn {
--icon-width: 40px;
position: absolute;
top: 6%;
left: 10%;
width: var(--icon-width);
height: var(--icon-width);
background: rgba(0, 0, 0, 0.25);
border-radius: 5px;
opacity: 0;
transform: translateX(-100%);
transition: all var(--transition-time) cubic-bezier(0.8, 0, 0.33, 1.25);
cursor: pointer;
}
nav .sub-menu-btn .line {
width: calc(var(--icon-width) -28px);
height: 2px;
background: #fff;
display: flex;
flex-direction: column;
margin: 12px 10px;
}
nav .sub-menu-btn .line__1 {
transform-origin: left;
transform: rotate(-35deg) translate(-1px, 8px);
}
nav .sub-menu-btn .line__2 {
transform-origin: left;
transform: rotate(35deg) translate(-1px, -8px);
}
nav .menu-btn {
display: flex;
justify-content: center;
align-items: center;
--icon-width: 25px;
position: absolute;
top: 5%;
right: -15%;
width: calc(var(--icon-width) +25px);
height: calc(var(--icon-width) +25px);
flex-direction: column;
transition: all calc(100ms + var(--transition-time)) cubic-bezier(0.8, 0, 0.33, 1.25);
cursor: pointer;
}
nav .menu-btn.close .line__1 {
transform: rotate(45deg) translate(2px, -3px);
}
nav .menu-btn.close .line__2 {
transform: rotate(-45deg);
}
nav .menu-btn.close .line__3 {
transform: rotate(45deg) translate(-2px, 3px);
}
nav .menu-btn .line {
width: var(--icon-width);
background: #fff;
height: 2px;
margin: 3px 0;
transition: all calc(var(--transition-time) + 100ms) cubic-bezier(0.9, 0, 0.33, 1);
}
nav .menu-btn .line__1 {
width: var(--icon-width);
transform-origin: left;
}
nav .menu-btn .line__2 {
width: var(--icon-width);
transform-origin: center;
}
nav .menu-btn .line__3 {
width: var(--icon-width);
transform-origin: right;
}
nav.nav-open {
transform: translateX(0%);
}
nav.nav-op.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0