html多个实心圆点横向排列,CSS3 多个圆点过渡

CSS

语言：

CSSSCSS

确定

@import url('http://fonts.googleapis.com/css?family=Julius+Sans+One');

body {

background-color: #3f51b5;

text-align: center;

}

.square-container {

margin-top: 100px;

position: relative;

display: inline-block;

margin-bottom: 10px;

}

.square {

height: 12px;

width: 12px;

background-color: #009688;

float: left;

margin: 10px;

margin-bottom: 30px;

border-radius: 50%;

-webkit-animation-name: loading;

-webkit-animation-duration: 4s;

-webkit-animation-iteration-count: infinite;

}

.uno {

-webkit-animation-delay: 1s;

}

.dos {

-webkit-animation-delay: 1.5s;

}

.tres {

-webkit-animation-delay: 2s;

}

.communication {

font-family: Julius Sans One;

font-size: 1.5em;

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

font-weight: bold;

letter-spacing: 20px;

margin-right: -20px;

-webkit-animation-name: message;

-webkit-animation-duration: 3s;

}

@-webkit-keyframes loading {

30% {

background-color: transparent;

}

}

@-webkit-keyframes message {

0% {

color: transparent;

}

}