css3运动框架,CSS3 原子运动

CSS

语言：

CSSSCSS

确定

/**

* Declare keyframes.

*/

/**

* Start Styling!

*/

@-webkit-keyframes rotateX {

0% {

-webkit-transform: rotate3d(1, 0, 1, 0deg);

transform: rotate3d(1, 0, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(1, 0, 1, 360deg);

transform: rotate3d(1, 0, 1, 360deg);

}

}

@keyframes rotateX {

0% {

-ms-transform: rotate3d(1, 0, 1, 0deg);

-webkit-transform: rotate3d(1, 0, 1, 0deg);

transform: rotate3d(1, 0, 1, 0deg);

}

100% {

-ms-transform: rotate3d(1, 0, 1, 360deg);

-webkit-transform: rotate3d(1, 0, 1, 360deg);

transform: rotate3d(1, 0, 1, 360deg);

}

}

@-webkit-keyframes rotateY {

0% {

-webkit-transform: rotate3d(0, 1, 1, 0deg);

transform: rotate3d(0, 1, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(0, 1, 1, 360deg);

transform: rotate3d(0, 1, 1, 360deg);

}

}

@keyframes rotateY {

0% {

-ms-transform: rotate3d(0, 1, 1, 0deg);

-webkit-transform: rotate3d(0, 1, 1, 0deg);

transform: rotate3d(0, 1, 1, 0deg);

}

100% {

-ms-transform: rotate3d(0, 1, 1, 360deg);

-webkit-transform: rotate3d(0, 1, 1, 360deg);

transform: rotate3d(0, 1, 1, 360deg);

}

}

@-webkit-keyframes rotateXY {

0% {

-webkit-transform: rotate3d(1, 1, 1, 0deg);

transform: rotate3d(1, 1, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(1, 1, 1, 360deg);

transform: rotate3d(1, 1, 1, 360deg);

}

}

@keyframes rotateXY {

0% {

-ms-transform: rotate3d(1, 1, 1, 0deg);

-webkit-transform: rotate3d(1, 1, 1, 0deg);

transform: rotate3d(1, 1, 1, 0deg);

}

100% {

-ms-transform: rotate3d(1, 1, 1, 360deg);

-webkit-transform: rotate3d(1, 1, 1, 360deg);

transform: rotate3d(1, 1, 1, 360deg);

}

}

@-webkit-keyframes rotateballX {

0% {

-webkit-transform: rotate3d(1, 0, 1, 0deg);

transform: rotate3d(1, 0, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(1, 0, 1, -360deg);

transform: rotate3d(1, 0, 1, -360deg);

}

}

@keyframes rotateballX {

0% {

-ms-transform: rotate3d(1, 0, 1, 0deg);

-webkit-transform: rotate3d(1, 0, 1, 0deg);

transform: rotate3d(1, 0, 1, 0deg);

}

100% {

-ms-transform: rotate3d(1, 0, 1, -360deg);

-webkit-transform: rotate3d(1, 0, 1, -360deg);

transform: rotate3d(1, 0, 1, -360deg);

}

}

@-webkit-keyframes rotateballY {

0% {

-webkit-transform: rotate3d(0, 1, 1, 0deg);

transform: rotate3d(0, 1, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(0, 1, 1, -360deg);

transform: rotate3d(0, 1, 1, -360deg);

}

}

@keyframes rotateballY {

0% {

-ms-transform: rotate3d(0, 1, 1, 0deg);

-webkit-transform: rotate3d(0, 1, 1, 0deg);

transform: rotate3d(0, 1, 1, 0deg);

}

100% {

-ms-transform: rotate3d(0, 1, 1, -360deg);

-webkit-transform: rotate3d(0, 1, 1, -360deg);

transform: rotate3d(0, 1, 1, -360deg);

}

}

@-webkit-keyframes rotateballXY {

0% {

-webkit-transform: rotate3d(1, 1, 1, 0deg);

transform: rotate3d(1, 1, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(1, 1, 1, -360deg);

transform: rotate3d(1, 1, 1, -360deg);

}

}

@keyframes rotateballXY {

0% {

-ms-transform: rotate3d(1, 1, 1, 0deg);

-webkit-transform: rotate3d(1, 1, 1, 0deg);

transform: rotate3d(1, 1, 1, 0deg);

}

100% {

-ms-transform: rotate3d(1, 1, 1, -360deg);

-webkit-transform: rotate3d(1, 1, 1, -360deg);

transform: rotate3d(1, 1, 1, -360deg);

}

}

* {

box-sizing: border-box;

}

body {

background-color: #aff298;

min-height: 100vh;

overflow: hidden;

width: 100%;

*zoom: 1;

filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFAFF298', endColorstr='#FF175B12');

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iOTglIj48c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iI2FmZjI5OCIvPjxzdG9wIG9mZnNldD0iOTglIiBzdG9wLWNvbG9yPSIjMTc1YjEyIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');

background-size: 100%;

background-image: -webkit-radial-gradient(center, ellipse cover, #aff298 33%, #175b12 98%);

background-image: radial-gradient(ellipse cover at center, #aff298 33%, #175b12 98%);

}

#wrapper {

position: absolute;

left: 50%;

top: 50%;

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

transform-style: preserve-3d;

}

.ring {

background-color: transparent;

border: 1px solid #500;

position: absolute;

border-radius: 50%;

}

.ring::after {

background-color: #f00;

border: 1px solid #000;

content: "";

height: 35px;

height: 1.5vw;

left: calc(50% - 0.75vw);

top: -0.75vw;

position: absolute;

width: 35px;

width: 1.5vw;

border-radius: 50%;

}

.ring::before {

background-color: #f00;

border: 1px solid #000;

content: "";

height: 35px;

height: 1.5vw;

left: calc(50% - 0.75vw);

bottom: -0.75vw;

position: absolute;

width: 35px;

width: 1.5vw;

border-radius: 50%;

}

#ring-outer-3 {

height: 200px;

height: 36vw;

left: calc(50% - 18vw);

top: calc(50% - 18vw);

width: 200px;

width: 36vw;

-webkit-animation: rotateY 6s linear infinite;

animation: rotateY 6s linear infinite;

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

transform-style: preserve-3d;

}

#ring-outer-3::after {

-webkit-animation: rotateballY 6s linear infinite;

animation: rotateballY 6s linear infinite;

}

#ring-outer-3::before {

-webkit-animation: rotateballY 6s linear infinite;

animation: rotateballY 6s linear infinite;

}

#ring-outer-2 {

height: 200px;

height: 30vw;

left: calc(50% - 15vw);

top: calc(50% - 15vw);

width: 200px;

width: 30vw;

-webkit-animation: rotateXY 5s linear infinite;

animation: rotateXY 5s linear infinite;

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

transform-style: preserve-3d;

}

#ring-outer-2::after {

-webkit-animation: rotateballXY 5s linear infinite;

animation: rotateballXY 5s linear infinite;

}

#ring-outer-2::before {

-webkit-animation: rotateballXY 5s linear infinite;

animation: rotateballXY 5s linear infinite;

}

#ring-outer {

height: 200px;

height: 24vw;

left: calc(50% - 12vw);

top: calc(50% - 12vw);

width: 200px;

width: 24vw;

-webkit-animation: rotateX 4s linear infinite;

animation: rotateX 4s linear infinite;

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

transform-style: preserve-3d;

}

#ring-outer::after {

-webkit-animation: rotateballX 4s linear infinite;

animation: rotateballX 4s linear infinite;

}

#ring-outer::before {

-webkit-animation: rotateballX 4s linear infinite;

animation: rotateballX 4s linear infinite;

}

#ring-middle {

height: 150px;

height: 18vw;

left: calc(50% - 9vw);

top: calc(50% - 9vw);

width: 150px;

width: 18vw;

-webkit-animation: rotateY 3.5s linear infinite;

animation: rotateY 3.5s linear infinite;

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

transform-style: preserve-3d;

}

#ring-middle::after {

-webkit-animation: rotateballY 3.5s linear infinite;

animation: rotateballY 3.5s linear infinite;

}

#ring-middle::before {

-webkit-animation: rotateballY 3.5s linear infinite;

animation: rotateballY 3.5s linear infinite;

}

#ring-inner {

height: 100px;

height: 12vw;

left: calc(50% - 6vw);

top: calc(50% - 6vw);

width: 100px;

width: 12vw;

-webkit-animation: rotateXY 3s linear infinite;

animation: rotateXY 3s linear infinite;

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

transform-style: preserve-3d;

}

#ring-inner::after {

-webkit-animation: rotateballXY 3s linear infinite;

animation: rotateballXY 3s linear infinite;

}

#ring-inner::before {

-webkit-animation: rotateballXY 3s linear infinite;

animation: rotateballXY 3s linear infinite;

}

#core {

background-color: #d99;

height: 50px;

height: 8vw;

left: calc(50% - 4vw);

position: absolute;

top: calc(50% - 4vw);

width: 50px;

width: 8vw;

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMCUiIHI9Ijk4JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iOTglIiBzdG9wLWNvbG9yPSIjMTEwMDAwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');

background-size: 100%;

background-image: -webkit-radial-gradient(top left, ellipse cover, #f00 0%, #100 98%);

background-image: -webkit-radial-gradient(ellipse cover at top left, #f00 0%, #100 98%);

background-image: radial-gradient(ellipse cover at top left, #f00 0%, #100 98%);

border-radius: 50%;

*zoom: 1;

filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFF0000', endColorstr='#FF000000');

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

transform-style: preserve-3d;

}