css 涟漪,CSS3 简单的涟漪动画

CSS

语言：

CSSSCSS

确定

body {

background: #0099cc;

height: 100%;

width: 100%;

color: white;

font-size: 16px;

}

.scott {

font-family: 'Raleway';

font-weight: 100;

color: white;

font-size: 40px;

text-align: center;

margin-top: 100px;

position: absolute;

left: 0;

right: 0;

}

.lower {

margin-top: 400px;

}

.jumper {

display: block;

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

width: 60px;

height: 60px;

}

.jumper > div {

background-color: #fff;

width: 15px;

height: 15px;

border-radius: 100%;

margin: 2px;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

position: absolute;

left: 0px;

top: 0px;

opacity: 0;

margin: 0;

width: 60px;

height: 60px;

-webkit-animation: jumper 1s 0s linear infinite;

animation: jumper 1s 0s linear infinite;

}

.jumper > div:nth-child(2) {

-webkit-animation-delay: 0.33333s;

animation-delay: 0.33333s;

}

.jumper > div:nth-child(3) {

-webkit-animation-delay: 0.66666s;

animation-delay: 0.66666s;

}

@-webkit-keyframes jumper {

0% {

-webkit-transform: scale(0);

transform: scale(0);

opacity: 0;

}

5% {

opacity: 1;

}

100% {

-webkit-transform: scale(1);

transform: scale(1);

opacity: 0;

}

}

@keyframes jumper {

0% {

-webkit-transform: scale(0);

transform: scale(0);

opacity: 0;

}

5% {

opacity: 1;

}

100% {