波纹效果可以用css的animation动画来实现，animation相比 单纯用transform能实现更为复杂的效果。
效果图：
下面三张图分别为 原图、效果图和去掉背景图片后的效果图，虽然可能效果图中的“波纹”颜色比较浅，但是并不妨碍最终完成动画效果。
实现思路：
1先写一个圆形的div（调整宽高和边框角度即可）作为波纹中心，写这个波纹中心主要是作为父盒子，并把这个波纹中心定位到背景中某个位置。
2在这个波纹中心内，再写三个同心的圆形盒子（绝对定位居中即可），作为波纹
3给这三个波纹盒子设置有颜色的边框，并且添加animation动画效果，然后分两到三步让波纹盒子宽高逐渐变大，并且让波纹盒子透明度从1到最终变为0，然后就会有一种波纹淡开的效果了。可是因为动画是同时开始的，所以看到的动画可能没有太多层次感，还需要最后的调整。
4给这三个波纹盒子的动画设置不同的延迟开始时间，并且将动画设置为不断循环进行。
5这样就能看到真正的波纹效果了。
具体代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body>div {position: relative;overflow: hidden;width: 480px;height: 318px;background: url("../images/气功.jpg") no-repeat;}body div[class^="attack"] {position: absolute;background-color: white;}body div .attack1 {width: 73px;height: 73px;border-radius: 73px;top: 227px;left: 81px;}body div .attack2 {width: 71px;height: 71px;border-radius: 71px;top: 83px;left: 209px;}body div .attack3 {width: 65px;height: 65px;border-radius: 65px;top: 91px;left: 421px;}@keyframes move {0% {width: 65px;height: 65px;border-radius: 65px;box-shadow: 0 0 0 2px #ABF8F4;}50% {opacity: 1;}100% {width: 120px;height: 120px;border-radius: 120px;box-shadow: 0 0 0 2px #ABF8F4;opacity: 0;}}body div[class^="pulse"] {position: absolute;top: 50%;left: 50%;width: 65px;height: 65px;border-radius: 65px;/* border: #ABF8F4 solid 2px; */transform: translate(-50%, -50%);animation-name: move;animation-duration: .8s;animation-iteration-count: infinite;}body div .pulse2 {animation-delay: 0.2s;}body div .pulse3 {animation-delay: 0.4s;}</style></head><body><div><div class="attack1"><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div><div class="attack2"><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div><div class="attack3"><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div></div></body></html>
