弹出玻璃模糊菜单动画效果
代码语言: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;
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0