js+css实现全屏菜单切换过渡动画效果代码-html代码-BFW代码库

js+css实现全屏菜单切换过渡动画效果代码

代码语言：html

代码描述：js+css实现全屏菜单切换过渡动画效果代码

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

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<meta name="description" content="A set of morphing shape overlays with SVG" />
		<meta name="keywords" content="shape, SVG, morphing, web development, web design, javascript" />
		
		<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400|Montserrat:700" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
<style>
    *,
*::after,
*::before {
	box-sizing: border-box;
}

html {
	background: #000;
}

body {
	font-family: 'Source Sans Pro', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	min-height: 100vh;
	color: #57585c;
	color: var(--color-text);	
	background-color: #fff;
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Color schemes */
.demo-1 {
	--color-text: #fff;
	--color-bg: #ddd;
	--color-link: #fff;
	--color-link-hover: #2735da;
	--color-info: #fff;
	--color-main-bg: #171619;
	--path-fill-1: #413f46;
	--path-fill-2: #e6e5ea;
	--path-fill-3: #cccccc;
	--color-title: #fff;
	--font-family-title: 'Montserrat', sans-serif;
	--font-size-title: 7vmax;
	--font-weight-title: 700;
	--color-menu: #171616;
	--color-menu-hover: #ffffff;
	--font-family-menu: 'Montserrat', sans-serif;
	--font-size-menu: 3vmax;
	--font-weight-menu: 700;
	--button-bg: #fff;
	--button-circle: #6b6b6b;
	--button-line: #222;
}

.demo-2 {
	--color-text: #fff;
	--color-bg: #333;
	--color-link: #fff;
	--color-link-hover: #f44e5e;
	--color-info: #fff;
	--color-main-bg: #efcb7b;
	--path-fill-1: #dce3f1;
	--path-fill-2: #869ccc;
	--path-fill-3: #30436f;
	--path-fill-4: #0d1831;
	--color-title: #fff;
	--font-family-title: inherit;
	--font-size-title: 6vmax;
	--font-weight-title: 200;
	--color-menu: #fff;
	--color-menu-hover: #fff;
	--font-family-menu: inherit;
	--font-size-menu: 4vmax;
	--font-weight-menu: 200;
	--button-bg: #fff;
	--button-circle: #fff;
	--button-line: #222;
}

.demo-3 {
	--color-text: #fbd54a;
	--color-bg: #333;
	--color-link: #4d4f5f;
	--color-link-hover: #bfb5b5;
	--color-info: #fff;
	--color-main-bg: #24262d;
	--path-fill-1: #000000;
	--path-fill-2: #1d1d1f;
	--path-fill-3: #fbd54a;
	--color-title: #fff;
	--font-family-title: 'Arapey', serif;
	--font-size-title: 5vmax;
	--font-weight-title: 400;
	--color-menu: #000000;
	--color-menu-hover: #fff;
	--font-family-menu: 'Arapey', serif;
	--font-size-menu: 4vmax;
	--font-weight-menu: 400;
	--button-bg: #fff;
	--button-circle: #ada4a4;
	--button-line: #222;
}

.demo-4 {
	--color-text: #fff;
	--color-bg: #333;
	--color-link: #1b198c;
	--color-link-hover: #d3eaa2;
	--color-info: #fff;
	--color-main-bg: #3735d0;
	--path-fill-1: #241e84;
	--path-fill-2: #d3eaa2;
	--color-title: #fff;
	--font-family-title: 'Pompiere', serif;
	--font-size-title: 6vmax;
	--font-weight-title: 300;
	--color-menu: #3735d0;
	--color-menu-hover: #b2dc53;
	--font-family-menu: var(--font-family-title);
	--font-size-menu: 4vmax;
	--font-weight-menu: 300;
	--button-bg: #b3dc53;
.........完整代码请登录后点击上方下载按钮下载查看