css 轨道,CSS3 三维轨道 140929

CSS

语言：

CSSSCSS

确定

* {

-moz-box-sizing: border-box;

box-sizing: border-box; }

body {

background: #222;

overflow: hidden; }

.contain {

position: absolute;

top: calc(50% - 100px);

left: calc(50% - 100px);

width: 100px;

height: 100px; }

.contain div {

position: absolute;

width: 100px;

height: 100px;

background: transparent;

border: 2px solid aquamarine; }

.contain div:nth-child(1) {

-webkit-animation: zoom 5s 0.125s infinite ease-in-out;

animation: zoom 5s 0.125s infinite ease-in-out; }

.contain div:nth-child(2) {

-webkit-animation: zoom 5s 0.25s infinite ease-in-out;

animation: zoom 5s 0.25s infinite ease-in-out; }

.contain div:nth-child(3) {

-webkit-animation: zoom 5s 0.375s infinite ease-in-out;

animation: zoom 5s 0.375s infinite ease-in-out; }

.contain div:nth-child(4) {

-webkit-animation: zoom 5s 0.5s infinite ease-in-out;

animation: zoom 5s 0.5s infinite ease-in-out; }

.contain div:nth-child(5) {

-webkit-animation: zoom 5s 0.625s infinite ease-in-out;

animation: zoom 5s 0.625s infinite ease-in-out; }

.contain div:nth-child(6) {

-webkit-animation: zoom 5s 0.75s infinite ease-in-out;

animation: zoom 5s 0.75s infinite ease-in-out; }

.contain div:nth-child(7) {

-webkit-animation: zoom 5s 0.875s infinite ease-in-out;

animation: zoom 5s 0.875s infinite ease-in-out; }

.contain div:nth-child(8) {

-webkit-animation: zoom 5s 1s infinite ease-in-out;

animation: zoom 5s 1s infinite ease-in-out; }

.contain div:nth-child(9) {

-webkit-animation: zoom 5s 1.125s infinite ease-in-out;

animation: zoom 5s 1.125s infinite ease-in-out; }

.contain div:nth-child(10) {

-webkit-animation: zoom 5s 1.25s infinite ease-in-out;

animation: zoom 5s 1.25s infinite ease-in-out; }

.contain div:nth-child(11) {

-webkit-animation: zoom 5s 1.375s infinite ease-in-out;

animation: zoom 5s 1.375s infinite ease-in-out; }

.contain div:nth-child(12) {

-webkit-animation: zoom 5s 1.5s infinite ease-in-out;

animation: zoom 5s 1.5s infinite ease-in-out; }

.contain div:nth-child(13) {

-webkit-animation: zoom 5s 1.625s infinite ease-in-out;

animation: zoom 5s 1.625s infinite ease-in-out; }

.contain div:nth-child(14) {

-webkit-animation: zoom 5s 1.75s infinite ease-in-out;

animation: zoom 5s 1.75s infinite ease-in-out; }

.contain div:nth-child(15) {

-webkit-animation: zoom 5s 1.875s infinite ease-in-out;

animation: zoom 5s 1.875s infinite ease-in-out; }

.contain div:nth-child(16) {

-webkit-animation: zoom 5s 2s infinite ease-in-out;

animation: zoom 5s 2s infinite ease-in-out; }

.contain div:nth-child(17) {

-webkit-animation: zoom 5s 2.125s infinite ease-in-out;

animation: zoom 5s 2.125s infinite ease-in-out; }

.contain div:nth-child(18) {

-webkit-animation: zoom 5s 2.25s infinite ease-in-out;

animation: zoom 5s 2.25s infinite ease-in-out; }

.contain div:nth-child(19) {

-webkit-animation: zoom 5s 2.375s infinite ease-in-out;

animation: zoom 5s 2.375s infinite ease-in-out; }

.contain div:nth-child(20) {

-webkit-animation: zoom 5s 2.5s infinite ease-in-out;

animation: zoom 5s 2.5s infinite ease-in-out; }

.contain div:nth-child(21) {

-webkit-animation: zoom 5s 2.625s infinite ease-in-out;

animation: zoom 5s 2.625s infinite ease-in-out; }

.contain div:nth-child(22) {

-webkit-animation: zoom 5s 2.75s infinite ease-in-out;

animation: zoom 5s 2.75s infinite ease-in-out; }

.contain div:nth-child(23) {

-webkit-animation: zoom 5s 2.875s infinite ease-in-out;

animation: zoom 5s 2.875s infinite ease-in-out; }

.contain div:nth-child(24) {

-webkit-animation: zoom 5s 3s infinite ease-in-out;

animation: zoom 5s 3s infinite ease-in-out; }

.contain div:nth-child(25) {

-webkit-animation: zoom 5s 3.125s infinite ease-in-out;

animation: zoom 5s 3.125s infinite ease-in-out; }

.contain div:nth-child(26) {

-webkit-animation: zoom 5s 3.25s infinite ease-in-out;

animation: zoom 5s 3.25s infinite ease-in-out; }

.contain div:nth-child(27) {

-webkit-animation: zoom 5s 3.375s infinite ease-in-out;

animation: zoom 5s 3.375s infinite ease-in-out; }

.contain div:nth-child(28) {

-webkit-animation: zoom 5s 3.5s infinite ease-in-out;

animation: zoom 5s 3.5s infinite ease-in-out; }

.contain div:nth-child(29) {

-webkit-animation: zoom 5s 3.625s infinite ease-in-out;

animation: zoom 5s 3.625s infinite ease-in-out; }

.contain div:nth-child(30) {

-webkit-animation: zoom 5s 3.75s infinite ease-in-out;

animation: zoom 5s 3.75s infinite ease-in-out; }

.contain div:nth-child(31) {

-webkit-animation: zoom 5s 3.875s infinite ease-in-out;

animation: zoom 5s 3.875s infinite ease-in-out; }

.contain div:nth-child(32) {

-webkit-animation: zoom 5s 4s infinite ease-in-out;

animation: zoom 5s 4s infinite ease-in-out; }

.contain div:nth-child(33) {

-webkit-animation: zoom 5s 4.125s infinite ease-in-out;

animation: zoom 5s 4.125s infinite ease-in-out; }

.contain div:nth-child(34) {

-webkit-animation: zoom 5s 4.25s infinite ease-in-out;

animation: zoom 5s 4.25s infinite ease-in-out; }

.contain div:nth-child(35) {

-webkit-animation: zoom 5s 4.375s infinite ease-in-out;

animation: zoom 5s 4.375s infinite ease-in-out; }

.contain div:nth-child(36) {

-webkit-animation: zoom 5s 4.5s infinite ease-in-out;

animation: zoom 5s 4.5s infinite ease-in-out; }

.contain div:nth-child(37) {

-webkit-animation: zoom 5s 4.625s infinite ease-in-out;

animation: zoom 5s 4.625s infinite ease-in-out; }

.contain div:nth-child(38) {

-webkit-animation: zoom 5s 4.75s infinite ease-in-out;

animation: zoom 5s 4.75s infinite ease-in-out; }

.contain div:nth-child(39) {

-webkit-animation: zoom 5s 4.875s infinite ease-in-out;

animation: zoom 5s 4.875s infinite ease-in-out; }

.contain div:nth-child(40) {

-webkit-animation: zoom 5s 5s infinite ease-in-out;

animation: zoom 5s 5s infinite ease-in-out; }

@-webkit-keyframes zoom {

100% {

-webkit-transform: scale(20) rotate(90deg);

transform: scale(20) rotate(90deg); } }

@keyframes zoom {

100% {

-webkit-transform: scale(20) rotate(90deg);

transform: scale(20) rotate(90deg); } }