css代码圈圈怎么写,CSS3 波动的圆圈

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background: #333;

padding-top: 20px;

}

#container {

margin: auto;

width: 100px;

height: 100px;

position: relative;

}

.circle:nth-child(1) {

width: 20px;

height: 20px;

border-radius: 50%;

border-width: 2px;

border-style: solid;

border-color: transparent;

-webkit-transform-origin: center center;

-webkit-animation: wave1 1.8s ease-in infinite;

-webkit-animation-delay: 0.1s;

position: absolute;

top: 40px;

left: 40px;

}

@-webkit-keyframes wave1 {

0% {

-webkit-transform: scale(1);

}

10% {

-webkit-transform: scale(1.3);

border-color: #5ad;

}

20% {

-webkit-transform: scale(1);

}

100% {

-webkit-transform: scale(1);

border-color: transparent;

}

}

.circle:nth-child(2) {

width: 40px;

height: 40px;

border-radius: 50%;

border-width: 2px;

border-style: solid;

border-color: transparent;

-webkit-transform-origin: center center;

-webkit-animation: wave2 1.8s ease-in infinite;

-webkit-animation-delay: 0.2s;

position: absolute;

top: 30px;

left: 30px;

}

@-webkit-keyframes wave2 {

0% {

-webkit-transform: scale(1);

}

10% {

-webkit-transform: scale(1.15);

border-color: #5ad;

}

20% {

-webkit-transform: scale(1);

}

100% {

-webkit-transform: scale(1);

border-color: transparent;

}

}

.circle:nth-child(3) {

width: 60px;

height: 60px;

border-radius: 50%;

border-width: 2px;

border-style: solid;

border-color: transparent;

-webkit-transform-origin: center center;

-webkit-animation: wave3 1.8s ease-in infinite;

-webkit-animation-delay: 0.3s;

position: absolute;

top: 20px;

left: 20px;

}

@-webkit-keyframes wave3 {

0% {

-webkit-transform: scale(1);

}

10% {

-webkit-transform: scale(1.1);

border-color: #5ad;

}

20% {

-webkit-transform: scale(1);

}

100% {

-webkit-transform: scale(1);

border-color: transparent;

}

}

.circle:nth-child(4) {

width: 80px;

height: 80px;

border-radius: 50%;

border-width: 2px;

border-style: solid;

border-color: transparent;

-webkit-transform-origin: center center;

-webkit-animation: wave4 1.8s ease-in infinite;

-webkit-animation-delay: 0.4s;

position: absolute;

top: 10px;

left: 10px;

}

@-webkit-keyframes wave4 {

0% {

-webkit-transform: scale(1);

}

10% {

-webkit-transform: scale(1.075);

border-color: #5ad;

}

20% {

-webkit-transform: scale(1);

}

100% {

-webkit-transform: scale(1);

border-color: transparent;

}

}

.circle:nth-child(5) {

width: 100px;

height: 100px;

border-radius: 50%;

border-width: 2px;

border-style: solid;

border-color: transparent;

-webkit-transform-origin: center center;

-webkit-animation: wave5 1.8s ease-in infinite;

-webkit-animation-delay: 0.5s;

position: absolute;

top: 0px;

left: 0px;

}

@-webkit-keyframes wave5 {

0% {

-webkit-transform: scale(1);

}

10% {

-webkit-transform: scale(1.06);

border-color: #5ad;

}

20% {

-webkit-transform: scale(1);

}

100% {

-webkit-transform: scale(1);

border-color: transparent;

}

}