炫酷菜单动态滑动效果
代码语言：html
所属分类：菜单导航
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Fancy tab bar active animation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
.tabbar {
--primary: #275EFE;
--background: #fff;
--icon-active: #fff;
--x: 64px;
width: 100%;
margin: 0;
padding: 0 16px;
border-radius: 0 0 28px 28px;
list-style: none;
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
background: var(--background);
}
.tabbar:before, .tabbar:after {
content: '';
position: absolute;
left: 0;
border-radius: 50%;
-webkit-transform: translateX(var(--x));
transform: translateX(var(--x));
}
.tabbar:before {
width: 64px;
height: 64px;
margin-left: -32px;
background: var(--primary);
top: -16px;
z-index: 1;
}
.tabbar:after {
width: 84px;
height: 84px;
margin-left: -42px;
background: rgba(255, 255, 255, 0.08);
top: -26px;
}
.tabbar li a {
display: block;
padding: 24px 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .2s ease;
transition: transform .2s ease;
transition: transform .2s ease, -webkit-transform .2s ease;
-webkit-tap-highlight-color: transparent;
}
.tabbar li a div {
--y: 0;
width: 32px;
height: 32px;
margin: 0 auto;
position: relative;
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateY(var(--y));
transform: translateY(var(--y));
}
.tabbar li a div svg {
display: block;
width: 32px;
height: 32px;
fill: rgba(255, 255, 255, 0);
stroke-width: 1px;
stroke: var(--primary);
}
.tabbar li a div:before {
--s-x: 1;
--s-y: 1;
content: '';
display: block;
position: absolute;
z-index: 1;
-webkit-transform: scaleX(var(--s-x)) scaleY(var(--s-y));
transform: scaleX(var(--s-x)) scaleY(var(--s-y));
}
.tabbar li a.box div:before {
--s-x: .75;
left: 50%;
margin-left: -1px;
width: 2px;
height: 12px;
bottom: 4px;
border-radius: 1px;
background: var(--primary);
}
.tabbar li a.box div em {
--s-x: 1;
--s-y: 1;
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
}
.tabbar li a.box div em:before, .tabbar li a.box div em:after {
--r: 0deg;
content: '';
display: block;
height: 2px;
border-radius: 1px;
width: 13px;
background: var(--primary);
position: absolute;
bottom: -1px;
-webkit-transform: rotateZ(var(--r)) translateY(1px) scaleY(0.75);
transform: rotateZ(var(--r)) translateY(1px) scaleY(0.75);
}
.tabbar li a.box div em:before {
--r: 30deg;
right: -1px;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.tabbar li a.box div em:after {
--r: -30deg;
left: -1px;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.tabbar li a.home div:before {
--s-x: .75;
--s-y: .75;
border: 2px solid var(--primary);
border-bottom: 0;
width: 12px;
height: 17px;
border-radius: 2px 2px 0 0;
left: 50%;
bottom: 1px;
margin-left: -6px;
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.tabbar li a.calendar div:before {
--s-y: .75;
height: 2px;
width: 22px;
background: var(--primary);
left: 50%;
top: 12px;
margin-left: -11px;
}
.tabbar li a.calendar div em {
display: block;
position: absolute;
top: 3px;
left: 50%;
}
.tabbar li a.calendar div em:before, .tabbar li a.calendar div em:after {
content: '';
display: block;
width: 2px;
border-radius: 1px;
height: 7px;
background: var(--primary);
position: absolute;
top: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scaleX(0.75);
transform: scaleX(0.75);
transition: background .4s ease;
}
.tabbar li a.calendar div em:before {
right: -6px;
}
.tabbar li a.calendar div em:after {
left: -6px;
}
.tabbar li.active a div {
--y: -24px;
}
.tabbar li.active a div svg {
fill: var(--icon-active);
}
.tabbar li.active a.calendar em:before, .tabbar li.active a.calendar em:after {
background: var(--icon-active);
}
.tabbar li:not(.active) a div {
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease;
}
.tabbar li:not(.active) a div svg {
transition: fill .4s ease;
}
.tabbar li:not(.active) a:active {
-webkit-transform: scale(0.92);
transform: scale(0.92);
}
.tabbar li.move a div {
-webkit-animation: icon 1.2s linear forwards;
animation: icon 1.2s linear forwards;
}
.tabbar li.move a div svg {
-webkit-animation: svg 1.2s linear forwards;
animation: svg 1.2s linear forwards;
}
.tabbar li.move a.box div:before {
-webkit-animation: element-far 1.2s linear forwards;
animation: element-far 1.2s linear forwards;
}
.tabbar li.move a.box div em {
-webkit-animation: element-close 1.2s linear forwards;
animation: element-close 1.2s linear forwards;
}
.tabbar li.move a.home div:before {
-webkit-animation: element-close 1.2s linear forwards;
animation: element-close 1.2s linear forwards;
}
.tabbar li.move a.calendar div:before {
-webkit-animation: element-close 1.2s linear forwards;
animation: element-close 1.2s linear forwards;
}
.tabbar li.move a.calendar div em {
-webkit-animation: calendar-2 1.2s linear forwards;
animation: calendar-2 1.2s linear forwards;
}
.tabbar li.move a.calendar div em:before, .tabbar li.move a.calendar div em:after {
-webkit-animation: calendar-3 1.2s linear forwards;
animation: calendar-3 1.2s linear forwards;
}
.tabbar.move:before {
-webkit-animation: move 1.2s linear forwards;
animation: move 1.2s linear forwards;
}
.tabbar.move:after {
-webkit-animation: move-after 1.2s linear forwards;
animation: move-after 1.2s linear forwards;
}
.frame {
width: 320px;
height: 240px;
border-radius: 0 0 28px 28px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
@-webkit-keyframes move {
10%,
15% {
-webkit-transform: translate(var(--x),84px);
transform: translate(var(--x),84px);
}
30% {
-webkit-transform: translate(var(--x-n),84px);
transform: translate(var(--x-n),84px);
}
42%,
70% {
-webkit-transform: translate(var(--x-n),-16px);
transform: translate(var(--x-n),-16px);
}
85% {
-webkit-transform: translate(var(--x-n),4px);
transform: translate(var(--x-n),4px);
}
100% {
-webkit-transform: translate(var(--x-n),0);
transform: translate(var(--x-n),0);
}
}
@keyframes move {
10%,
15% {
-webkit-transform: translate(var(--x),84px);
transform: translate(var(--x),84px);
}
30% {
-webkit-transform: translate(var(--x-n),84px);
transform: translate(var(--x-n),84px);
}
42%,
70% {
-webkit-transform: translate(var(--x-n),-16px);
transform: translate(var(--x-n),-16px);
}
85% {
-webkit-transform: translate(var(--x-n),4px);
transform: translate(var(--x-n),4px);
}
100% {
-webkit-transform: translate(var(--x-n),0);
transform: translate(var(--x-n),0);
}
}
@-webkit-keyframes move-after {
10%,
15% {
-webkit-transform: translate(var(--x),84px) scale(0.82);
transform: translate(var(--x),84px) scale(0.82);
}
30% {
-webkit-transform: translate(var(--x-n),84px) scale(0.82);
transform: translate(var(--x-n),84px) scale(0.82);
}
42% {
-webkit-transform: translate(var(--x-n),-16px) scale(0.82);
transform: translate(var(--x-n),-16px) scale(0.82);
}
60% {
-webkit-transform: translate(var(--x-n),-16px) scale(1);
transform: translate(var(--x-n),-16px) scale(1);
}
70% {
-webkit-transform: translate(var(--x-n),-16px) scale(1);
transform: translate(var(--x-n),-16px) scale(1);
}
85% {
-webkit-transform: translate(var(--x-n),4px) scale(1);
transform: translate(var(--x-n),4px) scale(1);
}
100% {
-webkit-transform: translate(var(--x-n),0) scale(1);
transform: translate(var(--x-n),0) scale(1);
}
}
@keyframes move-after {
10%,
15% {
-webkit-transform: translate(var(--x),84px) scale(0.82);
transform: translate(var(--x),84px) scale(0.82);
}
30% {
-webkit-transform: translate(var(--x-n),84px) scale(0.82);
transform: translate(var(--x-n),84px) scale(0.82);
}
42% {
-webkit-transform: translate(var(--x-n),-16px) scale(0.82);
transform: translate(var(--x-n),-16px) scale(0.82);
}
60% {
-webkit-transform: translate(var(--x-n),-16px) scale(1);
transform: translate(var(--x-n),-16px) scale(1);
}
70% {
-webkit-transform: translate(var(--x-n),-16px) scale(1);
transform: translate(var(--x-n),-16px) scale(1);
}
85% {
-webkit-transform: translate(var(--x-n),4px) scale(1);
transform: translate(var(--x-n),4px) scale(1);
}
100% {
-webkit-transform: translate(var(--x-n),0) scale(1);
transform: translate(var(--x-n),0) scale(1);
}
}
@-webkit-keyframes icon {
30% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
40%,
70% {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
85% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transform: translateY(-24px);
transform: translateY(-24px);
}
}
@keyframes icon {
30% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
40%,
70% {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
85% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transfo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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