html动画曲线快速结束,css

css

body {

margin: 0;

height: 100vh;

background: #000;

}

div, ::before, ::after {

position: absolute;

top: 50%;

left: 50%;

}

.a3d {

transform-style: preserve-3d;

}

.bar {

--k: 0;

--f: 1;

--p: var(--i)/var(--n);

margin: -1px -4em;

width: 8em;

height: 2px;

transform-style: preserve-3d;

--ini:

rotate(calc(var(--p)*1turn))

translate(13em)

rotatey(calc(var(--k)*1turn))

scalex(calc(1/var(--f)));

transform-origin: calc(var(--f)*50%) 50%;

transform: var(--ini);

background: HSL(calc(var(--p)*360), 85%, 65%);

animation: k 5s linear calc(var(--p)*-15s) infinite, f 2.5s ease-in-out calc(var(--p)*-15s) infinite alternate;

}

.bar::before, .bar::after {

left: calc(var(--s, 0)*100%);

margin: -.255em;

padding: .255em;

border-radius: 50%;

transform: scalex(calc(var(--f))) rotatey(calc(var(--k)*-1turn));

background: inherit;

content: "";

}

.bar::after {

--s: 1 ;

}

@keyframes f {

to {

--f: .5 ;

}

}

@keyframes k {

to {

--k: 1 ;

}

}