js+css实现弹簧式上下分页过渡动画效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现弹簧式上下分页过渡动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: sans-serif; max-width: 100vw; height: 100vh; position: relative; overflow: hidden; --black: #151515; --c1: #0272f2; --c2: #ff5213; --c3: #ffdf3f; --c4: #01b26e; --c5: #fea9e0; --c6: #ffdf3f; background: var(--black); } .vegetables { perspective: 500px; transform-style: preserve-3d; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100vw; height: 100%; position: absolute; top: 0; left: 0; margin: 0 auto; font-family: "Romie"; } .vegetables * { transform-style: preserve-3d; } .vegetables .inner { position: absolute; width: 100vw; height: 100vh; } .page { transform-style: preserve-3d; position: absolute; top: calc(50% - 100px); left: 50%; list-style: none; padding: 0; height: calc(90vmin - 300px); width: 90vmin; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; transform: translate(-50%, -50%) translateZ(200vmin); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1) 0.75s; } .page li { transition: 0.5s ease-in-out; opacity: 0; font-size: 7vmin; } .page li:nth-of-type(1) { color: #ccc; } .page li:nth-of-type(1) span:after { transform: scaleX(0); background: #ccc; transition: 0.5s ease-in-out 0.875s; } .page li:nth-of-type(2) { color: #ccc; } .page li:nth-of-type(2) span:after { transform: scaleX(0); background: #ccc; transition: 0.5s ease-in-out 1s; } .page li:nth-of-type(3) { color: #ccc; } .page li:nth-of-type(3) span:after { transform: scaleX(0); background: #ccc; transition: 0.5s ease-in-out 1.125s; } .page li:nth-of-type(4) { color: #ccc; } .page li:nth-of-type(4) span:after { transform: scaleX(0); background: #ccc; transition: 0.5s ease-in-out 1.25s; } .page li:nth-of-type(5) { color: #ccc; } .page li:nth-of-type(5) span:after { transform: scaleX(0); background: #ccc; transition: 0.5s ease-in-out 1.375s; } .page.current { transform: translate(-50%, -50%) translateZ(0vmin); } .page.current li { opacity: 1; background-position: 50% 100%; } .page.current li:nth-of-type(1) { transition: 0.5s ease-in-out 0.75s, color 0.5s ease-in-out 1.125s; color: var(--c1); } .page.current li:nth-of-type(1) span:after { transform: scaleX(1); background: var(--c1); transition: 0.5s ease-in-out 0.875s; } .page.current li:nth-of-type(2) { transition: 0.5s ease-in-out 0.75s, color 0.5s ease-in-out 1.25s; color: var(--c2); } .page.current li:nth-of-type(2) span:after { transform: scaleX(1); background: var(--c2); transition: 0.5s ease-in-out 1s; } .page.current li:nth-of-type(3) { transition: 0.5s ease-in-out 0.75s, color 0.5s ease-in-out 1.375s; color: var(--c3); } .page.current li:nth-of-type(3) span:after { transform: scaleX(1); background: var(--c3); transition: 0.5s ease-in-out 1.125s; } .page.current li:nth-of-type(4) { transition: 0.5s ease-in-out 0.75s, color 0.5s ease-in-out 1.5s; color: var(--c4); } .page.current li:nth-of-type(4) span:after { transform: scaleX(1); background: var(--c4); transition: 0.5s ease-in-out 1.25s; } .page.current li:nth-of-type(5) { transition: 0.5s ease-in-out 0.75s, color 0.5s ease-in-out 1.625s; color: var(--c5); } .page.current li:nth-of-type(5) span:after { transform: scaleX(1); background: var(--c5); transition: 0.5s ease-in-out 1.375s; } .page.current:nth-of-type(even) li:nth-of-type(1) { color: var(--c5); } .page.current:nth-of-type(even) li:nth-of-type(1) span:after { background: var(--c5); } .page.current:nth-of-type(even) li:nth-of-type(2) { color: var(--c4); } .page.current:nth-of-type(even) li:nth-of-type(2) span:after { background: var(--c4); } .page.current:nth-of-type(even) li:nth-of-type(3) { color: var(--c3); } .page.current:nth-of-type(even) li:nth-of-type(3) span:after { background: var(--c3); } .page.current:nth-of-type(even) li:nth-of-type(4) { color: var(--c2); } .page.current:nth-of-type(even) li:nth-of-type(4) span:after { background: var(--c2); } .page.current:nth-of-type(even) li:nth-of-type(5) { color: var(--c1); } .page.current:nth-of-type(even) li:nth-of-type(5) span:after { background: var(--c1); } .page li { display: flex; justify-content: flex-start; align-items: center; width: 100%; overflow: hidden; } .page li span { display: inline-block; position: relative; background: var(--black); } .page li span:after { content: ""; position: absolute; width: 100vw; left: calc(100% + 1rem); top: calc(50% - 0.5px); height: 1px; background: #ccc; z-index: -1; } .page li:nth-of-type(even) { justify-content: flex-end; } .page li:nth-of-type(even) span:after { left: auto; right: calc(100% + 1rem); } .pagination { text-align: center; margin-top: 20px; position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; } button { padding: 8px 16px; border: 1px solid #ccc; background: transparent; color: #ccc; cursor: pointer; margin: 0 7.5px 1rem; position: relative; z-index: 999; width: 200px; border-radius: 50px; transition: 0.3s ease-in-out; font-family: "Romie"; font-size: 1.15rem; padding: 0.15rem; font-weight: 900; } button:hover { border-color: var(--c3); color: var(--c3); } button:disabled { border-color: #666; color: #666; cursor: not-allowed; } #dots { --timing: 0.75; width: 400px; list-style-type: none; position: absolute; top: -150px; height: 200px; left: 50%; transform: translate(-50%); padding: 0; margin: 0; --basepath: "M 0 100 Q 200 100 400 100 "; --basepath-1: "M 0 150 Q 100 100 400 100 "; --basepath-2: "M 0 100 Q 100 200 400 100 "; --basepath-3: "M 0 100 Q 200 200 400 100 "; --basepath-4: "M 10 100 Q 300 200 400 100 "; --basepath-5: "M 10 100 Q 300 100 400 150 "; --placement-1: -5px; --placement-2: 95px; --placement-3: 195px; --placement-4: 295px; --placement-5: 395px; } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(1).prev) { --origin: var(--placement-1); --destination: var(--placement-1); } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(1).prev) svg path { animation: spring1 0.75s ease-in-out 1 forwards; } @keyframes spring1 { 75% { d: path(var(--basepath-1)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(1).prev) li { animation: bounce1 0.75s ease-in-out 1 forwards; } @keyframes bounce1 { 75% { offset-path: path(var(--basepath-1)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(1).prev) li:before { animation: shift1 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump1 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift1 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump1 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(2).prev) { --origin: var(--placement-2); --destination: var(--placement-1); } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(2).prev) svg path { animation: spring2 0.75s ease-in-out 1 forwards; } @keyframes spring2 { 75% { d: path(var(--basepath-2)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(2).prev) li { animation: bounce2 0.75s ease-in-out 1 forwards; } @keyframes bounce2 { 75% { offset-path: path(var(--basepath-2)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(2).prev) li:before { animation: shift2 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump2 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift2 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump2 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(3).prev) { --origin: var(--placement-3); --destination: var(--placement-1); } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(3).prev) svg path { animation: spring3 0.75s ease-in-out 1 forwards; } @keyframes spring3 { 75% { d: path(var(--basepath-3)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(3).prev) li { animation: bounce3 0.75s ease-in-out 1 forwards; } @keyframes bounce3 { 75% { offset-path: path(var(--basepath-3)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(3).prev) li:before { animation: shift3 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump3 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift3 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump3 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(4).prev) { --origin: var(--placement-4); --destination: var(--placement-1); } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(4).prev) svg path { animation: spring4 0.75s ease-in-out 1 forwards; } @keyframes spring4 { 75% { d: path(var(--basepath-4)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(4).prev) li { animation: bounce4 0.75s ease-in-out 1 forwards; } @keyframes bounce4 { 75% { offset-path: path(var(--basepath-4)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(4).prev) li:before { animation: shift4 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump4 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift4 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump4 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(5).prev) { --origin: var(--placement-5); --destination: var(--placement-1); } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(5).prev) svg path { animation: spring5 0.75s ease-in-out 1 forwards; } @keyframes spring5 { 75% { d: path(var(--basepath-5)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(5).prev) li { animation: bounce5 0.75s ease-in-out 1 forwards; } @keyframes bounce5 { 75% { offset-path: path(var(--basepath-5)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(1).active):has(li:nth-of-type(5).prev) li:before { animation: shift5 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump5 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift5 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump5 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(1).prev) { --origin: var(--placement-1); --destination: var(--placement-2); } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(1).prev) svg path { animation: spring1 0.75s ease-in-out 1 forwards; } @keyframes spring1 { 75% { d: path(var(--basepath-1)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(1).prev) li { animation: bounce1 0.75s ease-in-out 1 forwards; } @keyframes bounce1 { 75% { offset-path: path(var(--basepath-1)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(1).prev) li:before { animation: shift1 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump1 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift1 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump1 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(2).prev) { --origin: var(--placement-2); --destination: var(--placement-2); } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(2).prev) svg path { animation: spring2 0.75s ease-in-out 1 forwards; } @keyframes spring2 { 75% { d: path(var(--basepath-2)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(2).prev) li { animation: bounce2 0.75s ease-in-out 1 forwards; } @keyframes bounce2 { 75% { offset-path: path(var(--basepath-2)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(2).prev) li:before { animation: shift2 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump2 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift2 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump2 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(3).prev) { --origin: var(--placement-3); --destination: var(--placement-2); } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(3).prev) svg path { animation: spring3 0.75s ease-in-out 1 forwards; } @keyframes spring3 { 75% { d: path(var(--basepath-3)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(3).prev) li { animation: bounce3 0.75s ease-in-out 1 forwards; } @keyframes bounce3 { 75% { offset-path: path(var(--basepath-3)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(3).prev) li:before { animation: shift3 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump3 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift3 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump3 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(4).prev) { --origin: var(--placement-4); --destination: var(--placement-2); } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(4).prev) svg path { animation: spring4 0.75s ease-in-out 1 forwards; } @keyframes spring4 { 75% { d: path(var(--basepath-4)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(4).prev) li { animation: bounce4 0.75s ease-in-out 1 forwards; } @keyframes bounce4 { 75% { offset-path: path(var(--basepath-4)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(4).prev) li:before { animation: shift4 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump4 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift4 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump4 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(5).prev) { --origin: var(--placement-5); --destination: var(--placement-2); } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(5).prev) svg path { animation: spring5 0.75s ease-in-out 1 forwards; } @keyframes spring5 { 75% { d: path(var(--basepath-5)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(5).prev) li { animation: bounce5 0.75s ease-in-out 1 forwards; } @keyframes bounce5 { 75% { offset-path: path(var(--basepath-5)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(2).active):has(li:nth-of-type(5).prev) li:before { animation: shift5 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump5 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift5 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump5 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(3).active):has(li:nth-of-type(1).prev) { --origin: var(--placement-1); --destination: var(--placement-3); } #dots:has(li:nth-of-type(3).active):has(li:nth-of-type(1).prev) svg path { animation: spring1 0.75s ease-in-out 1 forwards; } @keyframes spring1 { 75% { d: path(var(--basepath-1)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(3).active):has(li:nth-of-type(1).prev) li { animation: bounce1 0.75s ease-in-out 1 forwards; } @keyframes bounce1 { 75% { offset-path: path(var(--basepath-1)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(3).active):has(li:nth-of-type(1).prev) li:before { animation: shift1 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump1 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift1 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump1 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(3).active):has(li:nth-of-type(2).prev) { --origin: var(--placement-2); --destination: var(--placement-3); } #dots:has(li:nth-of-type(3).active):has(li:nth-of-type(2).prev) svg path { animation: spring2 0.75s ease-in-out 1 forwards; } @keyframes spring2 { 75% { d: path(var(--basepath-2)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(3).active):has(li:nth-of-type(2).prev) li { animation: bounce2 0.75s ease-in-out 1 forwards; } @keyframes bounce2 { 75% { offset-path: path(var(--basepath-2)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { offset-path: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(3).active):has(li:nth-of-type(2).prev) li:before { animation: shift2 calc(0.35s * var(--timing)) ease-out 1 forwards 0.6s, jump2 calc(0.35s * var(--timing)) linear 1 forwards 0.6s; } @keyframes shift2 { 100% { transform: translateX(calc(var(--destination) - var(--origin))); } } @keyframes jump2 { 25%, 75% { top: calc(-50px * (var(--timing) * 0.75)); } 50% { top: calc(-50px * (var(--timing) * 1.25)); } 33%, 66% { top: calc(-50px * (var(--timing) * 1)); } } #dots:has(li:nth-of-type(3).active):has(li:nth-of-type(3).prev) { --origin: var(--placement-3); --destination: var(--placement-3); } #dots:has(li:nth-of-type(3).active):has(li:nth-of-type(3).prev) svg path { animation: spring3 0.75s ease-in-out 1 forwards; } @keyframes spring3 { 75% { d: path(var(--basepath-3)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } 100% { d: path(var(--basepath)); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.875); } } #dots:has(li:nth-of-type(3).active):has(li:nth-of-type(3).prev) li { anima.........完整代码请登录后点击上方下载按钮下载查看
网友评论0