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;
--button-circle: #1b198b;
--button-line: #fff;
}
.demo-5 {
--color-text: #c04444;
--color-bg: #333;
--color-link: #2d2c2b;
--color-link-hover: #c14343;
--color-info: #fff;
--color-main-bg: #ece7de;
--path-fill-1: #c04444;
--path-fill-2: #1b1a19;
--color-title: inherit;
--font-family-title: 'Playfair Display', serif;
--font-size-title: 6vmax;
--font-weight-title: 700;
--color-menu: #ffffff;
--color-menu-hover: #c14343;
--font-family-menu: var(--font-family-title);
--font-size-menu: 3.5vmax;
--font-weight-menu: 400;
--button-bg: #fff;
--button-circle: #c14343;
--button-line: #2d2c2b;
}
.demo-6 {
--color-text: #120047;
--color-bg: #333;
--color-link: #110046;
--color-link-hover: #e83779;
--color-info: #fff;
--color-main-bg: #7115d8;
--path-fill-1: url(#gradient1);
--path-fill-2: url(#gradient2);
--path-fill-3: url(#gradient3);
--color-title: inherit;
--font-family-title: 'Rozha One', serif;
--font-size-title: 8vmax;
--font-weight-title: 400;
--color-menu: #ffffff;
--color-menu-hover: #c14343;
--font-family-menu: var(--font-family-title);
--font-size-menu: 3.5vmax;
--font-weight-menu: 400;
--button-bg: #120047;
--button-circle: #9236f7;
--button-line: #ffffff;
}
/* Fade effect */
.js body {
opacity: 0;
transition: opacity 0.3s;
}
.js body.render {
opacity: 1;
}
a {
text-decoration: none;
color: #5d93d8;
color: var(--color-link);
outline: none;
}
a:hover,
a:focus {
color: #423c2b;
color: var(--color-link-hover);
outline: none;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
/* Icons */
.icon {
display: block;
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: currentColor;
}
.icon--keyboard {
display: none;
}
main {
position: relative;
width: 100%;
min-height: 100vh;
background-color: var(--color-main-bg);
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0 auto;
pointer-events: none;
}
.content--fixed {
position: fixed;
top: 0;
left: 0;
display: grid;
align-content: space-between;
width: 100%;
max-width: none;
min-height: 0;
height: 100vh;
padding: 1.5em;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto 4em;
grid-template-areas: 'header ...'
'... ...'
'github demos';
}
.content--fixed a {
pointer-events: auto;
}
/* Header */
.jq22-header {
position: relative;
z-index: 100;
display: flex;
flex-direction: row;
align-items: flex-start;
align-items: center;
align-self: start;
grid-area: header;
justify-self: start;
}
.jq22-header__title {
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 0.75em 0;
}
.info {
margin: 0 0 0 1.25em;
font-style: italic;
color: var(--color-info);
font-weight: bold;
}
.github {
display: block;
align-self: end;
grid-area: github;
justify-self: start;
margin: 0.5em;
}
.demos {
position: relative;
display: block;
align-self: end;
text-align: center;
grid-area: demos;
margin-bottom: 0.5em;
}
.demo {
margin: 0 0.15em;
}
.demo:hover,
.demo:focus {
opacity: 0.5;
}
.demo span {
white-space: nowrap;
text-transform: lowercase;
pointer-events: none;
}
.demo span::before {
content: '#';
}
a.demo--current {
pointer-events: none;
}
/* Top Navigation Style */
.jq22-links {
position: relative;
display: flex;
justify-content: center;
margin: 0 1em 0 0;
text-align: center;
white-space: nowrap;
}
.jq22-icon {
display: inline-block;
margin: 0.15em;
padding: 0.25em;
}
.demo-title {
color: var(--color-title);
font-family: var(--font-family-title);
font-size: var(--font-size-title);
font-weight: var(--font-weight-title);
}
.global-menu {
width: 100vw;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 100;
}
.demo-5 .global-menu {
text-align: center;
}
.global-menu__item {
color: var(--color-menu);
font-family: var(--font-family-menu);
font-size: var(--font-size-menu);
font-weight: var(--font-weight-menu);
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
display: block;
margin: 0.25em 0;
transition: transform 0.3s, opacity 0.3s;
transition-timing-function: ease-in;
}
.global-menu__item--demo-2:nth-child(odd) {
transform: translateY(-100%) rotate(10deg);
}
.global-menu__item--demo-2:nth-child(even) {
transform: translateY(-100%) rotate(-10deg);
}
.global-menu__item--demo-3 {
transition: transform 0.1s, opacity 0.1s;
transform: translateY(100%);
transition-timing-function: ease-out;
}
.global-menu__item--demo-4,
.global-menu__item--demo-5 {
transition: transform 0.1s, opacity 0.1s;
transition-timing-function: ease-out;
}
.global-menu__item--demo-4 {
transform: translateX(40%);
}
.global-menu__item--demo-5:nth-child(odd) {
transform: translateX(100%) rotate(10deg) scale(0.5);
}
.global-menu__item--demo-5:nth-child(even) {
transform: translateX(100%) rotate(-10deg) scale(0.5);
}
.global-menu__item--demo-6 {
transform: translateY(100%);
}
.global-menu__item:hover {
color: var(--color-menu-hover);
}
.global-menu__item.is-opened {
opacity: 1;
transform: translateY(0) rotate(0);
pointer-events: auto;
transition-timing-function: ease;
}
.global-menu__item--demo-4.is-opened,
.global-menu__item--demo-5.is-opened {
transform: translateX(0) rotate(0);
}
.global-menu__item--demo-4.is-opened {
transition-timing-function: cubic-bezier(0.230, 1.000, 0.355, 1.400);
}
.global-menu__item:nth-of-type(1) {
transition-delay: 0s;
}
.global-menu__item.is-opened:nth-of-type(1) {
transition-delay: 0.85s;
}
.global-menu__item:nth-of-type(2) {
transition-delay: 0.05s;
}
.global-menu__item.is-opened:nth-of-type(2) {
transition-delay: 0.8s;
}
.global-menu__item:nth-of-type(3) {
transition-delay: 0.1s;
}
.global-menu__item.is-opened:nth-of-type(3) {
transition-delay: 0.75s;
}
.global-menu__item:nth-of-type(4) {
transition-delay: 0.15s;
}
.global-menu__item.is-opened:nth-of-type(4) {
transition-delay: 0.7s;
}
/* demo 2 */
.global-menu__item--demo-2:nth-of-type(1) {
transition-delay: 0s;
}
.global-menu__item--demo-2.is-opened:nth-of-type(1) {
transition-delay: 0.85s;
}
.global-menu__item--demo-2:nth-of-type(2) {
transition-delay: 0.05s;
}
.global-menu__item--demo-2.is-opened:nth-of-type(2) {
transition-delay: 0.8s;
}
.global-menu__item--demo-2:nth-of-type(3) {
transition-delay: 0.1s;
}
.global-menu__item--demo-2.is-opened:nth-of-type(3) {
transition-delay: 0.75s;
}
.global-menu__item--demo-2:nth-of-type(4) {
transition-delay: 0.15s;
}
.global-menu__item--demo-2.is-opened:nth-of-type(4) {
transition-delay: 0.7s;
}
/* demo 3 */
.global-menu__item--demo-3.is-opened {
transition-duration: 0.3s;
}
.global-menu__item--demo-3:nth-of-type(1) {
transition-delay: 0s;
}
.global-menu__item--demo-3.is-opened:nth-of-type(1) {
transition-delay: 0.65s;
}
.global-menu__item--demo-3:nth-of-type(2) {
transition-delay: 0s;
}
.global-menu__item--demo-3.is-opened:nth-of-type(2) {
transition-delay: 0.7s;
}
.global-menu__item--demo-3:nth-of-type(3) {
transition-delay: 0s;
}
.global-menu__item--demo-3.is-opened:nth-of-type(3) {
transition-delay: 0.75s;
}
.global-menu__item--demo-3:nth-of-type(4) {
transition-delay: 0s;
}
.global-menu__item--demo-3.is-opened:nth-of-type(4) {
transition-delay: 0.8s;
}
/* demo 4 */
.global-menu__item--demo-4.is-opened {
transition-duration: 0.6s;
}
.global-menu__item--demo-4:nth-of-type(1) {
transition-delay: 0s;
}
.global-menu__item--demo-4.is-opened:nth-of-type(1) {
transition-delay: 0.45s;
}
.global-menu__item--demo-4:nth-of-type(2) {
transition-delay: 0.05s;
}
.global-menu__item--demo-4.is-opened:nth-of-type(2) {
transition-delay: 0.5s;
}
.global-menu__item--demo-4:nth-of-type(3) {
transition-delay: 0.1s;
}
.global-menu__item--demo-4.is-opened:nth-of-type(3) {
transition-delay: 0.55s;
}
.global-menu__item--demo-4:nth-of-type(4) {
transition-delay: 0.15s;
}
.global-menu__item--demo-4.is-opened:nth-of-type(4) {
transition-delay: 0.6s;
}
/* demo 5 */
.global-menu__item--demo-5.is-opened {
transition-duration: 0.4s;
}
.global-menu__item--demo-5:nth-of-type(1) {
transition-delay: 0s;
}
.global-menu__item--demo-5.is-opened:nth-of-type(1) {
transition-delay: 0.55s;
}
.global-menu__item--demo-5:nth-of-type(2) {
transition-delay: 0.05s;
}
.global-menu__item--demo-5.is-opened:nth-of-type(2) {
transition-delay: 0.6s;
}
.global-menu__item--demo-5:nth-of-type(3) {
transition-delay: 0.1s;
}
.global-menu__item--demo-5.is-opened:nth-of-type(3) {
transition-delay: 0.65s;
}
.global-menu__item--demo-5:nth-of-type(4) {
transition-delay: 0.15s;
}
.global-menu__item--demo-5.is-opened:nth-of-type(4) {
transition-delay: 0.7s;
}
/* demo 6 */
.global-menu__item--demo-6.is-opened {
transition-duration: 0.8s;
}
.global-menu__item--demo-6:nth-of-type(1) {
transition-delay: 0.25s;
}
.global-menu__item--demo-6.is-opened:nth-of-type(1) {
transition-delay: 1s;
}
.global-menu__item--demo-6:nth-of-type(2) {
transition-delay: 0.2s;
}
.global-menu__item--demo-6.is-opened:nth-of-type(2) {
transition-delay: 1.1s;
}
.global-menu__item--demo-6:nth-of-type(3) {
transition-delay: 0.15s;
}
.global-menu__item--demo-6.is-opened:nth-of-type(3) {
transition-delay: 1.2s;
}
.global-menu__item--demo-6:nth-of-type(4) {
transition-delay: 0.1s;
}
.global-menu__item--demo-6.is-opened:nth-of-type(4) {
transition-delay: 1.3s;
}
.shape-overlays {
width: 100vw;
height: 100vh;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
}
.shape-overlays.is-opened {
pointer-events: auto;
}
.shape-overlays__path:nth-of-type(1) {
fill: var(--path-fill-1);
}
.shape-overlays__path:nth-of-type(2) {
fill: var(--path-fill-2);
}
.shape-overlays__path:nth-of-type(3) {
fill: var(--path-fill-3);
}
.shape-overlays__path:nth-of-type(4) {
fill: var(--path-fill-4);
}
@-webkit-keyframes intervalHamburgerBorder {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
@keyframes intervalHamburgerBorder {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
.hamburger {
width: 64px;
height: 64px;
display: block;
position: relative;
cursor: pointer;
position: absolute;
top: 2.25em;
right: 2.25em;
z-index: 110;
border-radius: 50%;
background-color: var(--button-bg);
pointer-events: auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.hamburger::after {
width: 64px;
height: 64px;
box-sizing: border-box;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
border: 4px solid var(--button-circle);
border-radius: 50%;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
-webkit-animation-name: intervalHamburgerBorder;
animation-name: intervalHamburgerBorder;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.hamburger__line {
width: 28px;
height: 2px;
overflow: hidden;
position: absolute;
z-index: 10;
}
.hamburger__line-in {
width: 84px;
height: 2px;
position: absolute;
top: 0;
left: 0;
}
.hamburger__line-in::before,
.hamburger__line-in::after {
width: 28px;
height: 2px;
content: '';
display: block;
position: absolute;
top: 0;
background-color: var(--button-line);
}
.hamburger__line-in::before {
left: -56px;
}
.hamburger__line-in::after {
left: 0;
}
.hamburger__line--01,
.hamburger__line--02,
.hamburger__line--03,
.hamburger__line--cross01,
.hamburger__line--cross02 {
left: 18px;
}
.hamburger__line--01 {
top: 24.6px;
}
.hamburger__line--02,
.hamburger__line--cross01,
.hamburger__line--cross02 {
top: 31px;
}
.hamburger__line--03 {
top: 37.4px;
}
.hamburger__line--cross01 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.hamburger__line--cross02 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.hamburger__line {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger__line-in {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger__line-in::before,
.hamburger__line-in::after {
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.hamburger__line-in--cross01,
.hamburger__line-in--cross02 {
-webkit-transform: translateX(-33.3%);
transform: translateX(-33.3%);
}
.hamburger__line-in--01 {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.hamburger__line-in--02 {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.hamburger__line-in--02::before,
.hamburger__line-in--02::after {
-webkit-transition-delay: 0.05s;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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