一）第一种方法
（1）HTML结构
1 <body>
2 <div class="animate wave">
3 <div class="w1"></div>
4 <div class="w2"></div>
5 <div class="w3"></div>
6 <div class="w4"></div>
7 </div>
8 </body>
（2）CSS样式
1 <style type="text/css">
2 html{
3 font-size: 20px;
4 }
5 body{
6 background:#444;
7 }
8 @-webkit-keyframes opac{
9 from {
10 opacity: 1;
11 width:0;
12 height:0;
13 top:50%;
14 left:50%;
15 }
16 to {
17 opacity : 0;
18 width:100%;
19 height:100%;
20 top:0;
21 left:0;
22 }
23 }
24 .animate .w2{
25 -webkit-animation-delay:1s;
26 }
27 .animate .w3{
28 -webkit-animation-delay:2s;
29 }
30 .animate .w4{
31 -webkit-animation-delay:3s;
32 }
33 .wave{
34 width: 22.7rem;
35 height: 22.7rem;
36 position: absolute;
37 top: 0;
38 left: 0;
39 right: 0;
40 margin: 0 auto;
41 }
42 .wave *{
43 border:1px solid #fff;
44 position:absolute;
45 border-radius:50%;
46 -webkit-animation:opac 4s infinite;
47 }
48 </style>
（二）第二种方法
（1）HTML结构
1 <body>
2 <div class="circle">
3 <div class="c1"></div>
4 <div class="c2"></div>
5 <div class="c3"></div>
6 </div>
7 </body>
（2）CSS样式
1 <style>
2 body{
3 background:gold;
4 }
5
6 .circle {
7 position:absolute;
8 left:0;
9 top:0;
10 right: 0;
11 margin: 0 auto;
12 width:90px;
13 height:90px
14
15 }
16 .circle div {
17 position:absolute;
18 top:50%;
19 left:50%;
20 background:#fff;
21 width:90px;
22 height:90px;
23 margin-left:-45px;
24 margin-top:-45px;
25 opacity:1;
26 border-radius:90px;
27 animation: 1.2s linear infinite;
28 -webkit-animation: 1.2s linear infinite;
29 -ms--webkit-animation: 1.2s linear infinite;
30 -moz--webkit-animation: 1.2s linear infinite;
31 -o--webkit-animation: 1.2s linear infinite;
1
2 /* 此部分是上面动画的分开表示方法，推荐使用简写的方式-webkit-animation-duration:1.2s;
3 -webkit-animation-timing-function:linear;
4 -webkit-animation-iteration-count:infinite;
5 -ms-animation-duration:1.2s;
6 -ms-animation-timing-function:linear;
7 -ms-animation-iteration-count:infinite;
8 -moz-animation-duration:1.2s;
9 -moz-animation-timing-function:linear;
10 -moz-animation-iteration-count:infinite;
11 -o-animation-duration:1.2s;
12 -o-animation-timing-function:linear;
13 -o-animation-iteration-count:infinite;
14 animation-duration:1.2s;
15 animation-timing-function:linear;
16 animation-iteration-count:infinite;*/
1
2 }
3 .circle div.c1 {
4 width:20px;
5 height:20px;
6 margin-left:-10px;
7 margin-top:-10px;
8 opacity:1;
9 border-radius:90px
10 }
11 .circle div.c2 {
12 -webkit-animation-name:c2;
13 -webkit-animation-delay:.6s;
14 -ms-animation-name:c2;
15 -ms-animation-delay:.6s;
16 -moz-animation-name:c2;
17 -moz-animation-delay:.6s;
18 -o-animation-name:c2;
19 -o-animation-delay:.6s;
20 animation-name:c2;
21 animation-delay:.6s;
22 }
23 .circle div.c3 {
24 -webkit-animation-name:c2;
25 -webkit-animation-delay:1.2s;
26 -ms-animation-name:c2;
27 -ms-animation-delay:1.2s;
28 -moz-animation-name:c2;
29 -moz-animation-delay:1.2s;
30 -o-animation-name:c2;
31 -o-animation-delay:1.2s;
32 animation-name:c2;
33 animation-delay:1.2s;
34 }
35 @-webkit-keyframes c2 {
36 0% {
37 -webkit-transform:scale(.222);
38 -ms-transform:scale(.222);
39 -moz-transform:scale(.222);
40 -o-transform:scale(.222);
41 transform:scale(.222);
42 opacity:1
43 }
44 50% {
45 -webkit-transform:scale(.622);
46 -ms-transform:scale(.622);
47 -moz-transform:scale(.622);
48 -o-transform:scale(.622);
49 transform:scale(.622);
50 opacity:.4
51 }
52 98% {
53 -webkit-transform:scale(1);
54 -ms-transform:scale(1);
55 -moz-transform:scale(1);
56 -o-transform:scale(1);
57 transform:scale(1);
58 opacity:.2
59 }
60 100% {
61 opacity:0
62 }
63 }
64 @-ms-keyframes c2 {
65 0% {
66 -webkit-transform:scale(.222);
67 -ms-transform:scale(.222);
68 -moz-transform:scale(.222);
69 -o-transform:scale(.222);
70 transform:scale(.222);
71 opacity:1
72 }
73 50% {
74 -webkit-transform:scale(.622);
75 -ms-transform:scale(.622);
76 -moz-transform:scale(.622);
77 -o-transform:scale(.622);
78 transform:scale(.622);
79 opacity:.4
80 }
81 98% {
82 -webkit-transform:scale(1);
83 -ms-transform:scale(1);
84 -moz-transform:scale(1);
85 -o-transform:scale(1);
86 transform:scale(1);
87 opacity:.2
88 }
89 100% {
90 opacity:0
91 }
92 }
93 @-moz-keyframes c2 {
94 0% {
95 -webkit-transform:scale(.222);
96 -ms-transform:scale(.222);
97 -moz-transform:scale(.222);
98 -o-transform:scale(.222);
99 transform:scale(.222);
100 opacity:1
101 }
102 50% {
103 -webkit-transform:scale(.622);
104 -ms-transform:scale(.622);
105 -moz-transform:scale(.622);
106 -o-transform:scale(.622);
107 transform:scale(.622);
108 opacity:.4
109 }
110 98% {
111 -webkit-transform:scale(1);
112 -ms-transform:scale(1);
113 -moz-transform:scale(1);
114 -o-transform:scale(1);
115 transform:scale(1);
116 opacity:.2
117 }
118 100% {
119 opacity:0
120 }
121 }
122 @-o-keyframes c2 {
123 0% {
124 -webkit-transform:scale(.222);
125 -ms-transform:scale(.222);
126 -moz-transform:scale(.222);
127 -o-transform:scale(.222);
128 transform:scale(.222);
129 opacity:1
130 }
131 50% {
132 -webkit-transform:scale(.622);
133 -ms-transform:scale(.622);
134 -moz-transform:scale(.622);
135 -o-transform:scale(.622);
136 transform:scale(.622);
137 opacity:.4
138 }
139 98% {
140 -webkit-transform:scale(1);
141 -ms-transform:scale(1);
142 -moz-transform:scale(1);
143 -o-transform:scale(1);
144 transform:scale(1);
145 opacity:.2
146 }
147 100% {
148 opacity:0
149 }
150 }
151 @keyframes c2 {
152 0% {
153 -webkit-transform:scale(.222);
154 -ms-transform:scale(.222);
155 -moz-transform:scale(.222);
156 -o-transform:scale(.222);
157 transform:scale(.222);
158 opacity:1
159 }
160 50% {
161 -webkit-transform:scale(.622);
162 -ms-transform:scale(.622);
163 -moz-transform:scale(.622);
164 -o-transform:scale(.622);
165 transform:scale(.622);
166 opacity:.4
167 }
168 98% {
169 -webkit-transform:scale(1);
170 -ms-transform:scale(1);
171 -moz-transform:scale(1);
172 -o-transform:scale(1);
173 transform:scale(1);
174 opacity:.2
175 }
176 100% {
177 opacity:0
178 }
179 }
180 </style>
（三）第三种方法
（1）HTML结构
1 <body>
2 <div class="container">
3 <div class="dot"></div>
4 <div class="wave"></div>
5 </div>
6 </body>
（2）CSS样式
1 <style type="text/css">
2 .container{
3 position: relative;
4 width: 100px;
5 height: 100px;
6 margin: 0 auto;
7 }
8 .dot{
9 position: absolute;
10 left: 15px;
11 top:15px;
12 width:6px;
13 height: 6px;
14 border-radius: 50%;
15 }
16 .wave{
17 position: absolute;
18 left: 2px;
19 top: 2px;
20 width: 24px;
21 height: 24px;
22 border: 6px solid red;
23 border-radius: 50%;
24 opacity: 0;
25 animation: waveCircle 3s ease-out;
26 animation-iteration-count: infinite;
27 }
28 @-webkit-keyframes waveCircle {
29 0%{
30 transform: scale(0);
31 opacity: 0;
32 }
33 10%{
34 transform: scale(0.1);
35 opacity: 0.1;
36 }
37 20%{
38 transform: scale(0.2);
39 opacity: 0.2;
40 }
41 30%{
42 transform: scale(0.3);
43 opacity: 0.3;
44 }
45 75%{
46 transform: scale(0.6);
47 opacity: 0.5;
48 }
49 100%{
50 transform: scale(1);
51 opacity: 0;
52 }
53 }
54 </style>
（四）第四种方法
（1）HTML结构
1 <body>
2 <div class="example">
3 <div class="dot"></div>
4 </div>
5 </body>
（2）CSS样式
1 <style type="text/css">
2 .example {
3 position:relative;
4 margin:150px auto;
5 width:50px;
6 height:50px;
7 }
8 .dot:before{
9 content:' ';
10 position: absolute;
11 z-index:2;
12 left:0;
13 top:0;
14 width:10px;
15 height:10px;
16 background-color: #ff4200;
17 border-radius: 50%;
18 }
19
20 .dot:after {
21 content:' ';
22 position: absolute;
23 z-index:1;
24 width:10px;
25 height:10px;
26 background-color: #ff4200;
27 border-radius: 50%;
28 box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
29 -webkit-animation: waveCircle 1s ease infinite normal ;
1
2 /*-webkit-animation-name: ripple;
3 -webkit-animation-duration: 1s;
4 -webkit-animation-timing-function: ease;
5 -webkit-animation-delay: 0s;
6 -webkit-animation-iteration-count: infinite;
7 -webkit-animation-direction: normal;*/
8 }
9
10 @keyframes waveCircle {
11 0% {
12 left:5px;
13 top:5px;
14 width:0;
15 height:0;
16 }
17 100% {
18 left:-20px;
19 top:-20px;
20 opacity: 0;
21 width:50px;
22 height:50px;
23 }
24 }
25 </style>
