css炫酷的倒计时,CSS3 无尽的倒计时型LOADING动效

CSS

语言：

CSSSCSS

确定

:root {

--duration: 5s;

--bg: #001823;

--color: #00c15e;

}

html {

font-size: 1vmin;

background: var(--bg) radial-gradient(closest-corner, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));

height: 100%;

}

@keyframes rotate1 {

25% {

left: 0;

transform: rotate(-135deg);

opacity: 1;

}

25.01% {

left: -.5em;

opacity: 0;

}

50% {

left: 0;

opacity: 0;

}

50.01% {

opacity: 1;

transform: rotate(-135deg);

}

75% {

left: 0;

transform: rotate(-315deg);

}

100% {

transform: rotate(-315deg);

}

}

@keyframes rotate2 {

25% {

right: 0;

transform: rotate(-135deg);

opacity: 1;

}

25.01% {

right: -.5em;

opacity: 0;

}

50% {

right: 0;

opacity: 0;

}

50.01% {

opacity: 1;

transform: rotate(-135deg);

}

75% {

right: 0;

transform: rotate(-315deg);

}

100% {

transform: rotate(-315deg);

}

}

@keyframes container {

25% {

transform: translate3d(0, -50%, 0);

width: .5em;

}

50% {

transform: translate3d(-100%, -50%, 0);

width: .5em;

}

75% {

transform: translate3d(-50%, -50%, 0);

width: 1em;

}

}

.countdown {

font-size: 50rem;

width: 1em;

height: 1em;

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

animation: container calc(var(--duration) * 2) steps(1) infinite;

overflow: hidden;

}

.countdown::before,

.countdown::after {

display: block;

content: '';

box-sizing: border-box;

border: .125em solid transparent;

border-radius: 50%;

position: absolute;

top: 0;

bottom: 0;

width: 1em;

transform: rotate(45deg);

animation-timing-function: linear;

animation-duration: calc(var(--duration) * 2);

animation-iteration-count: infinite;

}

.countdown::before {

border-color: transparent transparent var(--color) var(--color);

animation-name: rotate1;

left: 0;

}

.countdown::after {

border-color: var(--color) var(--color) transparent transparent;

animation-delay: calc(var(--duration) / 2);

animation-name: rotate2;

right: 0;

}