来自：https://blog.csdn.net/qq_38658877/article/details/78092649 侵删
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: gold;
}
.circle {
position: absolute;
left: 0;
top: 0;
right: 0;
margin: 0 auto;
width: 90px;
height: 90px
}
.circle div {
position: absolute;
top: 50%;
left: 50%;
background: #fff;
width: 90px;
height: 90px;
margin-left: -45px;
margin-top: -45px;
opacity: 1;
border-radius: 90px;
animation: 1.2s linear infinite;
-webkit-animation: 1.2s linear infinite;
-ms--webkit-animation: 1.2s linear infinite;
-moz--webkit-animation: 1.2s linear infinite;
-o--webkit-animation: 1.2s linear infinite;
/* 此部分是上面动画的分开表示方法，推荐使用简写的方式-webkit-animation-duration:1.2s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-ms-animation-duration:1.2s;
-ms-animation-timing-function:linear;
-ms-animation-iteration-count:infinite;
-moz-animation-duration:1.2s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-o-animation-duration:1.2s;
-o-animation-timing-function:linear;
-o-animation-iteration-count:infinite;
animation-duration:1.2s;
animation-timing-function:linear;
animation-iteration-count:infinite;*/
}
.circle div.c1 {
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
opacity: 1;
border-radius: 90px
}
.circle div.c2 {
-webkit-animation-name: c2;
-webkit-animation-delay: .6s;
-ms-animation-name: c2;
-ms-animation-delay: .6s;
-moz-animation-name: c2;
-moz-animation-delay: .6s;
-o-animation-name: c2;
-o-animation-delay: .6s;
animation-name: c2;
animation-delay: .6s;
}
.circle div.c3 {
-webkit-animation-name: c2;
-webkit-animation-delay: 1.2s;
-ms-animation-name: c2;
-ms-animation-delay: 1.2s;
-moz-animation-name: c2;
-moz-animation-delay: 1.2s;
-o-animation-name: c2;
-o-animation-delay: 1.2s;
animation-name: c2;
animation-delay: 1.2s;
}
@-webkit-keyframes c2 {
0% {
-webkit-transform: scale(.222);
-ms-transform: scale(.222);
-moz-transform: scale(.222);
-o-transform: scale(.222);
transform: scale(.222);
opacity: 1
}
50% {
-webkit-transform: scale(.622);
-ms-transform: scale(.622);
-moz-transform: scale(.622);
-o-transform: scale(.622);
transform: scale(.622);
opacity: .4
}
98% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: .2
}
100% {
opacity: 0
}
}
@-ms-keyframes c2 {
0% {
-webkit-transform: scale(.222);
-ms-transform: scale(.222);
-moz-transform: scale(.222);
-o-transform: scale(.222);
transform: scale(.222);
opacity: 1
}
50% {
-webkit-transform: scale(.622);
-ms-transform: scale(.622);
-moz-transform: scale(.622);
-o-transform: scale(.622);
transform: scale(.622);
opacity: .4
}
98% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: .2
}
100% {
opacity: 0
}
}
@-moz-keyframes c2 {
0% {
-webkit-transform: scale(.222);
-ms-transform: scale(.222);
-moz-transform: scale(.222);
-o-transform: scale(.222);
transform: scale(.222);
opacity: 1
}
50% {
-webkit-transform: scale(.622);
-ms-transform: scale(.622);
-moz-transform: scale(.622);
-o-transform: scale(.622);
transform: scale(.622);
opacity: .4
}
98% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: .2
}
100% {
opacity: 0
}
}
@-o-keyframes c2 {
0% {
-webkit-transform: scale(.222);
-ms-transform: scale(.222);
-moz-transform: scale(.222);
-o-transform: scale(.222);
transform: scale(.222);
opacity: 1
}
50% {
-webkit-transform: scale(.622);
-ms-transform: scale(.622);
-moz-transform: scale(.622);
-o-transform: scale(.622);
transform: scale(.622);
opacity: .4
}
98% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: .2
}
100% {
opacity: 0
}
}
@keyframes c2 {
0% {
-webkit-transform: scale(.222);
-ms-transform: scale(.222);
-moz-transform: scale(.222);
-o-transform: scale(.222);
transform: scale(.222);
opacity: 1
}
50% {
-webkit-transform: scale(.622);
-ms-transform: scale(.622);
-moz-transform: scale(.622);
-o-transform: scale(.622);
transform: scale(.622);
opacity: .4
}
98% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: .2
}
100% {
opacity: 0
}
}
</style>
</head>
<body>
<div class="circle">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
</body>
</html>
