纯css全屏导航菜单效果-html代码-BFW代码库

代码语言：html

代码描述：纯css全屏导航菜单效果

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


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

<style>
/* Please ❤ this if you like it! */


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

body{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: #ececee;
	background-color: #1f2029;
	overflow: hidden;
  background-image: url('data:image/svg+xml;base64,Cjw/eG1sIHZlcnNpb249IjEuMCIgZW5jb2Rpbmc9InV0Zi04Ij8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSItMTUwIC0zOCAyNzggMTk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IC0xNTAgLTM4IDI3OCAxOTc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojODE2N2E5OyBvcGFjaXR5OiAwLjE7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTEwMS43LDYyLjdjMC43LTAuNCwxLjQtMC41LDItMC44Yy0wLjUsMC40LTEuMSwwLjgtMS43LDEuMmMtMi42LDEuNS01LjQsMi41LTguNCwzLjJjMC43LTAuMSwxLjMtMC4yLDItMC4zCgljMC43LTAuMiwxLjMtMC4zLDItMC41Yy0xLjIsMC40LTIuNSwwLjctMy43LDFjLTAuNywwLjItMS4zLDAuMy0yLDAuNGwtMSwwLjJjLTAuMywwLjEtMC43LDAuMS0xLDAuMWMwLjMsMCwwLjcsMCwxLDBsMS0wLjFsMS0wLjEKCWMwLjMsMCwwLjctMC4xLDEtMC4xYzIuMy0wLjMsNC41LTEsNi43LTEuOWMyLjQtMSw0LjgtMi4zLDYuOS00YzIuMS0xLjYsNC0zLjYsNS41LTUuNmMwLjktMS4yLDEuNi0yLjQsMi4zLTMuNQoJYzAuOS0wLjcsMS45LTEuMywyLjgtMS44bC0wLjEsMGMxLjEtMSwyLjItMS43LDMuMy0yLjFjMS4xLTAuNCwyLjMtMC40LDMuNS0wLjFjMS4yLDAuMywyLjUsMSwzLjgsMS43YzEuNCwwLjgsMi44LDEuNyw0LjQsMi41CgljMS41LDAuNywzLjMsMS40LDUuMywxLjVjMC41LDAsMSwwLDEuNSwwYzAuNSwwLDEtMC4xLDEuNS0wLjNjMS0wLjIsMS45LTAuNywyLjgtMS4yYzAuOS0wLjUsMS42LTEuMiwyLjMtMS45CgljMC42LTAuNywxLjItMS40LDEuNy0yLjFjMS0xLjQsMS43LTIuOSwyLjQtNC4zYzEuMS0yLjMsMi4yLTQuNSwzLjQtNi4zYzEuMi0xLjgsMi41LTMuMywzLjktNGMxLjQtMC43LDIuOS0wLjksNC44LTAuNAoJYzEuOSwwLjQsMy45LDEuNCw2LDIuNGMyLjEsMS4xLDQuMywyLjMsNi45LDMuM2MxLjMsMC41LDIuNiwwLjksNC4xLDEuMmMxLjUsMC4zLDMuMSwwLjQsNC43LDAuMmMxLjQtMC4yLDIuNy0wLjUsNC0xLjEKCWMxLjItMC42LDIuNC0xLjQsMy4zLTIuM0MtOS44LDM1LTguNSwzMy03LjUsMzFjMS0yLDEuOS0zLjksMi43LTUuN2MwLjgtMS44LDEuNy0zLjQsMi43LTQuN2MyLTIuNSw0LjMtMy4zLDcuNC0yLjUKCWMxLjUsMC40LDMuMiwxLjIsNSwyLjFjMS43LDAuOSwzLjYsMS45LDUuNiwyLjljMiwwLjksNC4zLDEuOCw3LDJjMS4zLDAuMSwyLjcsMCw0LjEtMC4zYzEuMy0wLjMsMi42LTAuOCwzLjgtMS41CgljMi4zLTEuNCw0LTMuMiw1LjQtNC45YzEuNC0xLjgsMi42LTMuNSwzLjctNS4xYzEuMS0xLjYsMi4zLTMsMy41LTRjMS4yLTEsMi40LTEuNSwzLjctMS43YzEuMy0wLjEsMi45LDAuMSw0LjYsMC43CgljMS43LDAuNSwzLjYsMS4zLDUuNiwyLjFjMi4yLDAuOCw0LjYsMS42LDcuNCwxLjdjMC40LDAsMC43LDAsMS4xLDBsMS4xLTAuMWMwLjcsMCwxLjQtMC4zLDIuMS0wLjRjMC40LTAuMSwwLjctMC4yLDEtMC4zbDEtMC40CgljMC42LTAuMywxLjItMC43LDEuOC0xYzIuMy0xLjUsNC0zLjQsNS41LTUuMWMxLjUtMS44LDIuOC0zLjUsNC4yLTVjMS4zLTEuNSwyLjctMi44LDQuMS0zLjZjMS40LTAuOCwzLTEuMyw0LjgtMS41CgljMS44LTAuMiwzLjctMC4xLDUuOCwwLjFjMiwwLjIsNC4xLDAuNiw2LjMsMWMxLjYsMC4zLDMuMiwwLjUsNSwwLjdjMS44LDAuMSwzLjYsMC4xLDUuNC0wLjFjMS44LTAuMiwzLjUtMC41LDUuMi0xLjEKCWMxLjctMC42LDMuMy0xLjMsNC42LTIuNGMwLjUtMC40LDEtMC45LDEuNC0xLjJjMC40LTAuNCwwLjgtMC45LDEuMS0xLjNjMC4zLTAuNCwwLjUtMC45LDAuNy0xLjNjMC4yLTAuNCwwLjMtMC44LDAuNC0xLjEKCWMwLjItMC41LDAuMy0xLjEsMC4yLTEuN2MwLTAuNC0wLjEtMC43LTAuMy0wLjhjLTAuMy0wLjMtMC44LDAtMS41LDAuNmwtMC4yLDAuM2wtMC4zLDAuM2MtMC4yLDAuMi0wLjQsMC40LTAuNywwLjYKCWMtMC41LDAuNC0xLjEsMC45LTEuOCwxLjRjLTEuNiwxLTMuNCwxLjUtNS44LDIuMWMtMS44LDAuNC0zLjgsMC42LTUuOCwwLjZjLTIsMC00LTAuMy02LjEtMC43Yy00LjItMC43LTguNi0xLjgtMTMuMy0xLjcKCWMtMS42LDAtMy4zLDAuMi01LDAuN2MtMS43LDAuNS0zLjMsMS4zLTQuOCwyLjNjLTEuNSwxLTIuNywyLjItMy45LDMuNEM3Ny0zLjcsNzYtMi41LDc1LTEuM2MtMS44LDIuMi0zLjYsNC4yLTUuNSw1LjQKCWMtMC4yLDAuMi0wLjUsMC4zLTAuNywwLjRjLTAuMiwwLjEtMC41LDAuMy0wLjcsMC4zbC0wLjcsMC4zYy0wLjMsMC0wLjUsMC4xLTAuNywwLjJjLTEsMC4yLTIuMSwwLjItMy4xLTAuMQoJYy0xLjEtMC4yLTIuMy0wLjYtMy42LTEuMWwtNC0xLjZjLTEuNC0wLjYtMy0xLjEtNC42LTEuNWMtMS43LTAuNC0zLjYtMC41LTUuNi0wLjNjLTEuNiwwLjItMy4yLDAuOC00LjYsMS42CgljLTEuNCwwLjgtMi42LDEuOC0zLjYsMi44Yy0yLDItMy40LDQuMi00LjgsNi4yYy0xLjQsMi0yLjYsMy44LTQuMSw1LjFjLTEuNCwxLjMtMi44LDItNC41LDIuMWMtMiwwLjEtNC41LTAuOS03LTIuMQoJYy0xLjktMS00LTIuMS02LjItMy4xYy0xLjEtMC41LTIuMy0xLTMuNi0xLjRjLTEuMy0wLjQtMi43LTAuNi00LjItMC42Yy0xLjUsMC0zLDAuMy00LjQsMC44Yy0xLjQsMC41LTIuNywxLjMtMy44LDIuMwoJYy0yLjIsMi0zLjUsNC4zLTQuNiw2LjRjLTEuMSwyLjItMiw0LjMtMi45LDYuMmMtMC45LDEuOS0yLDMuNy0zLjIsNC45Yy0xLjIsMS4yLTIuNywxLjktNC4zLDIuMWMtMS42LDAuMS0zLjUtMC4zLTUuNS0xLjEKCWMtMy0xLjEtNi0yLjktOS40LTQuNGMtMS43LTAuNy0zLjYtMS40LTUuNi0xLjdjLTIuMS0wLjMtNC40LTAuMS02LjQsMC44Yy0xLDAuNC0xLjksMS0yLjgsMS42Yy0wLjgsMC43LTEuNSwxLjQtMi4yLDIuMgoJYy0xLjMsMS42LTIuMSwzLjItMi45LDQuOGMtMS41LDMuMi0yLjYsNi40LTQuMiw5Yy0wLjgsMS4zLTEuNywyLjMtMi44LDIuOWMtMC41LDAuMy0xLjEsMC41LTEuNywwLjZjLTAuMiwwLTAuMywwLjEtMC41LDAuMQoJbC0wLjUsMGMtMC4zLDAtMC42LDAtMS0wLjFjLTEuMy0wLjItMi43LTAuOC00LjItMS42Yy0xLjQtMC44LTIuOS0xLjctNC42LTIuNGMtMS4xLTAuNS0yLjItMC45LTMuNC0xLjJjLTEuMy0wLjMtMi41LTAuMy0zLjgtMC4xCgljLTEuMywwLjItMi41LDAuNy0zLjYsMS4zYy0xLjEsMC42LTIsMS40LTIuOSwyLjFjLTMuNCwzLjItNS41LDctOC41LDkuN2MtNS45LDUuNi0xNC41LDguMi0yMi42LDdjLTItMC4zLTQuMS0wLjYtNi0xLjMKCWMxLjMsMC45LDIuNiwxLjcsNC40LDIuM2MwLjMsMC4xLDAuNywwLjIsMS4zLDAuM2wxLjcsMC4yYy0wLjYtMC4xLTEuMy0wLjEtMS45LTAuMmMtMC4.........完整代码请登录后点击上方下载按钮下载查看