选项卡菜单切换跳跃动画效果
代码语言:html
所属分类:选项卡
代码描述:选项卡菜单切换跳跃动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --tab-background: hsl(0deg, 33%, 99%); --background: hsl(313deg, 96%, 10%); --stroke-color: hsl(358deg, 99%, 65%); } body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; background: var(--background); } svg:not(.twitter-icon) { color: var(--stroke-color); height: inherit; fill: var(--tab-background); stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; position: absolute; } #container { --r: 50px; min-width: 400px; width: 400px; max-width: 400px; height: 380px; display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; border-radius: 2px 2px var(--r) var(--r); overflow: hidden; } #tab { background: var(--tab-background); width: inherit; height: 120px; border-radius: inherit; padding: 20px 80px; box-sizing: border-box; position: relative; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; } .icon { width: 38px; height: 38px; position: relative; z-index: 5; cursor: pointer; } .icon.active.box .l1, .icon.active.home .l1, .icon.active.calender .l1 { --in: -252px; -webkit-animation: in 0.4s 1.1s forwards, landed 0.5s 1.5s forwards; animation: in 0.4s 1.1s forwards, landed 0.5s 1.5s forwards; } .icon.active.box .l2 { --in: -212px; } .icon.active.box .l3 { --in: -200px; } .icon.active.home .l2 { --in: -216px; -webkit-animation: in 0.26s 1.14s forwards, landed 0.5s 1.5s forwards; animation: in 0.26s 1.14s forwards, landed 0.5s 1.5s forwards; } .icon.active.box .l2, .icon.active.box .l3, .icon.active.calender .l2, .icon.active.calender .l3 { -webkit-animation: in 0.3s 1.1s forwards, landed 0.5s 1.5s forwards; animation: in 0.3s 1.1s forwards, landed 0.5s 1.5s forwards; } .icon.active.calender .l2 { --in: -190px; } .icon.active.calender .l3 { --in: -214px; } .icon.active .l1 svg { -webkit-animation: out 0.1s 1s forwards, in_again 0.2s 1.6s forwards; animation: out 0.1s 1s forwards, in_again 0.2s 1.6s forwards; } .icon:not(.active) { -webkit-animation: back 0.2s forwards; animation: back 0.2s forwards; } @-webkit-keyframes in { 50% { -webkit-transform: translateY(calc(var(--in) + 10px)); transform: translateY(calc(var(--in) + 10px)); } 100% { -webkit-transform: translateY(var(--in)); transform: translateY(var(--in)); } } @keyframes in { 50% { -webkit-transform: translateY(calc(var(--in) + 10px)); transform: translateY(calc(var(--in) + 10px)); } 100% { -webkit-transform: translateY(var(--in)); transform: translateY(var(--in)); } } @-webkit-keyframes out { 100% { fill: transparent; } } @keyframes out { 100% { fill: transparent; } } @-webkit-keyframes landed { 70% { -webkit-transform: translateY(-55px); transform: translateY(-55px); } 100% { -webkit-transform: translateY(-59px); transform: translateY(-59px); } } @keyframes landed { 70% { -webkit-transform: translateY(-55px); transform: translateY(-55px); } 100% { -webkit-transform: translateY(-59px); transform: translateY(-59px); } } @-webkit-keyframes in_again { 100% { fill: var(--tab-background); } } @keyframes in_again { 100% { fill: var(--tab-background); } } @-webkit-keyframes back { 0% { -webkit-transform: translateY(-59px); transform: translateY(-59px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes back { 0% { -webkit-transform: translateY(-59px); transform: translateY(-59px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } .box .l2 svg { fill: transparent; } .home .l2 svg { -webkit-transform: translateY(-1px); transform: translateY(-1px); fill: transparent; } .circle { --s: 86px; width: var(--s); height: var(--s); border-radius: var(--s); -webkit-transform: translateX(0); transform: translateX(0); position: absolute; top: -34%; left: 56px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .circle[data-active="0"] { -webkit-transform: translateX(0); transform: translateX(0); } .circle[data-active="1"] { -webkit-transform: translateX(101px); transform: translateX(101px); } .circle[data-active="2"] { -webkit-transform: translateX(202px); transform: translateX(202px); } .circle[data-animating="true"] { -webkit-animation: landY 0.5s forwards, moveX 0.5s 0.5s forwards, jumpY 0.5s 1s forwards, landedY 0.5s 1.5s forwards; animation: landY 0.5s forwards, moveX 0.5s 0.5s forwards, jumpY 0.5s 1s forwards, landedY 0.5s 1.5s forwards; } .circle[data-animating="true"] > .circle-inner::before { -webkit-transform: scale(0); transform: scale(0); -webkit-animation: scale 0.3s 1.2s forwards; animation: scale 0.3s 1.2s forwards; } @-webkit-keyframes landY { 100% { top: 80%; } } @keyframes landY { 100% { top: 80%; } } @-webkit-keyframes moveX { 100% { -webkit-transform: translateX(var(--x)); transform: translateX(var(--x)); } } @keyframes moveX { 100% { -webkit-transform: translateX(var(--x)); transform: translateX(var(--x)); } } @-webkit-keyframes jumpY { 100% { top: -62%; } } @keyframes jumpY { 100% { top: -62%; } } @-webkit-keyframes landedY { 70% { top: -30%; } 100% { top: -34%; } } @keyframes landedY { 70% { top: -30%; } 100% { top: -34%; } } .circle-inner { width: inherit; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0