一）第一种方法
（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:90px14 ?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:1101 ????????????}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:.4109 ????????????}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:.2117 ????????????}118 ????????????100% {119 ????????????????opacity:0120 ????????????}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:1130 ????????????}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:.4138 ????????????}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:.2146 ????????????}147 ????????????100% {148 ????????????????opacity:0149 ????????????}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:1159 ????????????}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:.4167 ????????????}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:.2175 ????????????}176 ????????????100% {177 ????????????????opacity:0178 ????????????}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>四种方式实现波浪效果（CSS效果）
原文地址：https://www.cnblogs.com/cangqinglang/p/9797084.html