从中间到四周css3,CSS3 从圆环中间穿过的动画

CSS

语言：

CSSSCSS

确定

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-perspective: 400px;

perspective: 400px;

background: black;

height: 100vh;

overflow: hidden;

}

.spinner {

position: relative;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-animation: wobble 6.65s ease-in-out infinite;

animation: wobble 6.65s ease-in-out infinite;

}

.spinner:before,

.spinner:after {

display: block;

content: "";

width: 25vmin;

height: 25vmin;

border: 12.5vmin solid;

border-radius: 50%;

-webkit-animation: spin 2.5s ease-in-out infinite both reverse;

animation: spin 2.5s ease-in-out infinite both reverse;

}

.spinner:before {

border-color: chocolate;

position: absolute;

}

.spinner:after {

border-color: beige;

-webkit-animation-delay: -1.25s;

animation-delay: -1.25s;

}

@-webkit-keyframes wobble {

0%, 100% {

-webkit-transform: rotateX(11.25deg) rotateY(45deg);

transform: rotateX(11.25deg) rotateY(45deg);

}

50% {

-webkit-transform: rotateX(45deg) rotateY(-45deg) rotate(180deg);

transform: rotateX(45deg) rotateY(-45deg) rotate(180deg);

}

}

@keyframes wobble {

0%, 100% {

-webkit-transform: rotateX(11.25deg) rotateY(45deg);

transform: rotateX(11.25deg) rotateY(45deg);

}

50% {

-webkit-transform: rotateX(45deg) rotateY(-45deg) rotate(180deg);

transform: rotateX(45deg) rotateY(-45deg) rotate(180deg);

}

}

@-webkit-keyframes spin {

0%, 100% {

-webkit-transform: translateZ(50px) rotateX(18deg);

transform: translateZ(50px) rotateX(18deg);

}

33% {

-webkit-transform: translateZ(-50px) scale(0.4);

transform: translateZ(-50px) scale(0.4);

}

66% {

-webkit-transform: translateZ(-50px);

transform: translateZ(-50px);

}

}

@keyframes spin {

0%, 100% {

-webkit-transform: translateZ(50px) rotateX(18deg);

transform: translateZ(50px) rotateX(18deg);

}

33% {

-webkit-transform: translateZ(-50px) scale(0.4);

transform: translateZ(-50px) scale(0.4);

}

66% {

-webkit-transform: translateZ(-50px);

transform: translateZ(-50px);

}

}