四种方式实现波浪效果（CSS效果）
一）第一种方法
（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>
喜欢这篇文章？欢迎打赏~~
