css阵列,CSS3简单的圆点阵列旋转加载动画

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);

*,

*:before,

*:after {

box-sizing: border-box;

}

html {

font-family: 'Open Sans', Helvetica, arial, sans-serif;

background-color: #eeeeee;

color: #333333;

}

h1,

h2,

h3,

h4,

h5,

h6 {

text-align: center;

font-family: 'Raleway', 'Open Sans', sans-serif;

}

.header {

position: relative;

overflow: visible;

}

.header:after {

content: '';

position: absolute;

bottom: 0;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

width: 50px;

height: 2px;

background-color: #30b37e;

}

.pen__subheading {

margin-bottom: 0;

}

.pen__subheading a {

color: #30b37e;

}

.pen__subheading a:hover,

.pen__subheading a:focus {

color: #5cd3a3;

}

a {

text-decoration: none;

color: #333333;

}

.container {

overflow: hidden;

width: 100%;

max-width: 800px;

margin: 0 auto;

padding: 2rem 1rem;

}

.col {

padding: 1rem;

}

@media (min-width: 800px) {

.col {

width: 50%;

float: left;

}

.col:nth-of-type(2n+1) {

clear: left;

}

}

.col.col--full {

width: 100%;

}

.dot-loader {

position: relative;

display: block;

width: 72px;

height: 72px;

margin: 0 auto;

}

.dot-loader .dot {

position: absolute;

width: 8px;

height: 8px;

background-color: #30b37e;

border-radius: 100%;

}

.dot-loader .dot:nth-of-type(1) {

-webkit-transform: translate(0px, 0px);

transform: translate(0px, 0px);

}

.dot-loader .dot:nth-of-type(2) {

-webkit-transform: translate(16px, 0px);

transform: translate(16px, 0px);

}

.dot-loader .dot:nth-of-type(3) {

-webkit-transform: translate(32px, 0px);

transform: translate(32px, 0px);

}

.dot-loader .dot:nth-of-type(4) {

-webkit-transform: translate(48px, 0px);

transform: translate(48px, 0px);

}

.dot-loader .dot:nth-of-type(5) {

-webkit-transform: translate(64px, 0px);

transform: translate(64px, 0px);

}

.dot-loader .dot:nth-of-type(6) {

-webkit-transform: translate(0px, 16px);

transform: translate(0px, 16px);

}

.dot-loader .dot:nth-of-type(7) {

-webkit-transform: translate(16px, 16px);

transform: translate(16px, 16px);

}

.dot-loader .dot:nth-of-type(8) {

-webkit-transform: translate(32px, 16px);

transform: translate(32px, 16px);

}

.dot-loader .dot:nth-of-type(9) {

-webkit-transform: translate(48px, 16px);

transform: translate(48px, 16px);

}

.dot-loader .dot:nth-of-type(10) {

-webkit-transform: translate(64px, 16px);

transform: translate(64px, 16px);

}

.dot-loader .dot:nth-of-type(11) {

-webkit-transform: translate(0px, 32px);

transform: translate(0px, 32px);

}

.dot-loader .dot:nth-of-type(12) {

-webkit-transform: translate(16px, 32px);

transform: translate(16px, 32px);

}

.dot-loader .dot:nth-of-type(13) {

-webkit-transform: translate(32px, 32px);

transform: translate(32px, 32px);

}

.dot-loader .dot:nth-of-type(14) {

-webkit-transform: translate(48px, 32px);

transform: translate(48px, 32px);

}

.dot-loader .dot:nth-of-type(15) {

-webkit-transform: translate(64px, 32px);

transform: translate(64px, 32px);

}

.dot-loader .dot:nth-of-type(16) {

-webkit-transform: translate(0px, 48px);

transform: translate(0px, 48px);

}

.dot-loader .dot:nth-of-type(17) {

-webkit-transform: translate(16px, 48px);

transform: translate(16px, 48px);

}

.dot-loader .dot:nth-of-type(18) {

-webkit-transform: translate(32px, 48px);

transform: translate(32px, 48px);

}

.dot-loader .dot:nth-of-type(19) {

-webkit-transform: translate(48px, 48px);

transform: translate(48px, 48px);

}

.dot-loader .dot:nth-of-type(20) {

-webkit-transform: translate(64px, 48px);

transform: translate(64px, 48px);

}

.dot-loader .dot:nth-of-type(21) {

-webkit-transform: translate(0px, 64px);

transform: translate(0px, 64px);

}

.dot-loader .dot:nth-of-type(22) {

-webkit-transform: translate(16px, 64px);

transform: translate(16px, 64px);

}

.dot-loader .dot:nth-of-type(23) {

-webkit-transform: translate(32px, 64px);

transform: translate(32px, 64px);

}

.dot-loader .dot:nth-of-type(24) {

-webkit-transform: translate(48px, 64px);

transform: translate(48px, 64px);

}

.dot-loader .dot:nth-of-type(25) {

-webkit-transform: translate(64px, 64px);

transform: translate(64px, 64px);

}

.dot-loader.active .dot {

transition: 0.3s ease-in-out;

}

.dot-loader.active .dot:nth-of-type(1) {

-webkit-transform: translate(0, 16px);

transform: translate(0, 16px);

}

.dot-loader.active .dot:nth-of-type(2) {

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

.dot-loader.active .dot:nth-of-type(3) {

-webkit-transform: translate(16px, 0);

transform: translate(16px, 0);

}

.dot-loader.active .dot:nth-of-type(4) {

-webkit-transform: translate(32px, 0);

transform: translate(32px, 0);

}

.dot-loader.active .dot:nth-of-type(5) {

-webkit-transform: translate(48px, 0);

transform: translate(48px, 0);

}

.dot-loader.active .dot:nth-of-type(6) {

-webkit-transform: translate(0px, 32px);

transform: translate(0px, 32px);

}

.dot-loader.active .dot:nth-of-type(7) {

-webkit-transform: translate(32px, 16px);

transform: translate(32px, 16px);

}

.dot-loader.active .dot:nth-of-type(8) {

-webkit-transform: translate(48px, 16px);

transform: translate(48px, 16px);

}

.dot-loader.active .dot:nth-of-type(9) {

-webkit-transform: translate(48px, 32px);

transform: translate(48px, 32px);

}

.dot-loader.active .dot:nth-of-type(10) {

-webkit-transform: translate(64px, 0px);

transform: translate(64px, 0px);

}

.dot-loader.active .dot:nth-of-type(11) {

-webkit-transform: translate(0px, 48px);

transform: translate(0px, 48px);

}

.dot-loader.active .dot:nth-of-type(12) {

-webkit-transform: translate(16px, 16px);

transform: translate(16px, 16px);

}

.dot-loader.active .dot:nth-of-type(13) {

-webkit-transform: translate(32px, 32px);

transform: translate(32px, 32px);

}

.dot-loader.active .dot:nth-of-type(14) {

-webkit-transform: translate(48px, 48px);

transform: translate(48px, 48px);

}

.dot-loader.active .dot:nth-of-type(15) {

-webkit-transform: translate(64px, 16px);

transform: translate(64px, 16px);

}

.dot-loader.active .dot:nth-of-type(16) {

-webkit-transform: translate(0px, 64px);

transform: translate(0px, 64px);

}

.dot-loader.active .dot:nth-of-type(17) {

-webkit-transform: translate(16px, 32px);

transform: translate(16px, 32px);

}

.dot-loader.active .dot:nth-of-type(18) {

-webkit-transform: translate(16px, 48px);

transform: translate(16px, 48px);

}

.dot-loader.active .dot:nth-of-type(19) {

-webkit-transform: translate(32px, 48px);

transform: translate(32px, 48px);

}

.dot-loader.active .dot:nth-of-type(20) {

-webkit-transform: translate(64px, 32px);

transform: translate(64px, 32px);

}

.dot-loader.active .dot:nth-of-type(21) {

-webkit-transform: translate(16px, 64px);

transform: translate(16px, 64px);

}

.dot-loader.active .dot:nth-of-type(22) {

-webkit-transform: translate(32px, 64px);

transform: translate(32px, 64px);

}

.dot-loader.active .dot:nth-of-type(23) {

-webkit-transform: translate(48px, 64px);

transform: translate(48px, 64px);

}

.dot-loader.active .dot:nth-of-type(24) {

-webkit-transform: translate(64px, 64px);

transform: translate(64px, 64px);

}

.dot-loader.active .dot:nth-of-type(25) {

-webkit-transform: translate(64px, 48px);

transform: translate(64px, 48px);

}