css3 动画设置水波纹，效果如下图：
源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>test</title> </head> <style type="text/css"> .dot-box{height:40px;width:40px;border-radius:100%;position:relative;margin:40px;} .dot-box:hover{cursor:pointer;} .dot1 { animation: keyframes-dot1 1.5s cubic-bezier(.17,.67,.18,.41); } .dot2 { animation: keyframes-dot2 1.5s cubic-bezier(.17,.67,.18,.41);//贝塞尔曲线生成网站：http://cubic-bezier.com/ } .dot3 { animation: keyframes-dot3 1.5s cubic-bezier(.17,.67,.18,.41); } .dot1,.dot2,.dot3{ height: 40px; width: 40px; background: rgba(249,58,28, 1); color: white; line-height: 40px; text-align: center; border-radius: 100%; animation-iteration-count:infinite; } @keyframes keyframes-dot1 { 0% { box-shadow: 0 0 0 0px rgba(238,67,40, 0.7); } 100% { box-shadow: 0 0 0 30px rgba(238,67,40, 0); } } @keyframes keyframes-dot2 { 0% { box-shadow: 0 0 0 0px rgba(238,67,40, 0.8); } 100% { box-shadow: 0 0 0 20px rgba(238,67,40, 0); } } @keyframes keyframes-dot3 { 0% { box-shadow: 0 0 0 0px rgba(238,67,40, 0.9); } 100% { box-shadow: 0 0 0 10px rgba(238,67,40, 0); } } </style> <body> <div class="dot-box"> <div class="dot1"> <div class="dot2"> <div class="dot3">扬州</div> </div> </div> </div> </body> </html>