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: tra.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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