css阵列,CSS3 斜向波动的圆点阵列

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

margin: 0;

background: #30283f;

/**

* Also try:

* scale: 1.5,

* size: 10px,

* -

* scale: 75,

* size: 1px

* -

* scale: 10,

* size: 1px

*/

}

.dots {

font-size: 0;

width: 250px;

height: 250px;

position: absolute;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.dot {

display: inline-block;

width: 10px;

height: 10px;

background: #fff;

border-radius: 50%;

margin: 20px;

}

.dot:nth-child(1) {

background: #d15;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.13333s;

animation-delay: -0.13333s;

}

.dot:nth-child(2) {

background: #fe0;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.26667s;

animation-delay: -0.26667s;

}

.dot:nth-child(3) {

background: #f90196;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

}

.dot:nth-child(4) {

background: #0ff;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.53333s;

animation-delay: -0.53333s;

}

.dot:nth-child(5) {

background: #d15;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.66667s;

animation-delay: -0.66667s;

}

.dot:nth-child(6) {

background: #0ff;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.26667s;

animation-delay: -0.26667s;

}

.dot:nth-child(7) {

background: #d15;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

}

.dot:nth-child(8) {

background: #fe0;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.53333s;

animation-delay: -0.53333s;

}

.dot:nth-child(9) {

background: #f90196;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.66667s;

animation-delay: -0.66667s;

}

.dot:nth-child(10) {

background: #0ff;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

.dot:nth-child(11) {

background: #f90196;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

}

.dot:nth-child(12) {

background: #0ff;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.53333s;

animation-delay: -0.53333s;

}

.dot:nth-child(13) {

background: #d15;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.66667s;

animation-delay: -0.66667s;

}

.dot:nth-child(14) {

background: #fe0;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

.dot:nth-child(15) {

background: #f90196;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.93333s;

animation-delay: -0.93333s;

}

.dot:nth-child(16) {

background: #fe0;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.53333s;

animation-delay: -0.53333s;

}

.dot:nth-child(17) {

background: #f90196;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.66667s;

animation-delay: -0.66667s;

}

.dot:nth-child(18) {

background: #0ff;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

.dot:nth-child(19) {

background: #d15;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.93333s;

animation-delay: -0.93333s;

}

.dot:nth-child(20) {

background: #fe0;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -1.06667s;

animation-delay: -1.06667s;

}

.dot:nth-child(21) {

background: #d15;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.66667s;

animation-delay: -0.66667s;

}

.dot:nth-child(22) {

background: #fe0;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

.dot:nth-child(23) {

background: #f90196;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -0.93333s;

animation-delay: -0.93333s;

}

.dot:nth-child(24) {

background: #0ff;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -1.06667s;

animation-delay: -1.06667s;

}

.dot:nth-child(25) {

background: #d15;

-webkit-animation: scale 0.4s infinite ease alternate;

animation: scale 0.4s infinite ease alternate;

-webkit-animation-delay: -1.2s;

animation-delay: -1.2s;

}

@-webkit-keyframes scale {

0% {

-webkit-transform: scale(1);

transform: scale(1);

}

20% {

-webkit-transform: scale(1);

transform: scale(1);

}

100% {

-webkit-transform: scale(5);

transform: scale(5);

}

}

@keyframes scale {

0% {

-webkit-transform: scale(1);

transform: scale(1);

}

20% {

-webkit-transform: scale(1);

transform: scale(1);

}

100% {

-webkit-transform: scale(5);

transform: scale(5);

}

}

a {

position: absolute;

left: 50%;

bottom: 5px;

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

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

transform: translateX(-50%);

color: rgba(255, 255, 255, 0.4);

text-decoration: none;

font-weight: 700;

font-family: sans-serif;

-webkit-transition: color 0.2s;

transition: color 0.2s;

}

a:hover {

color: #fff;

}