css 圆点波纹（水波、地标、图标动态效果）

<div class="container">
    <div class="box">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
  </div>

.container {
	      position: relative;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      flex-direction: row;
	  }
	
	  .container .box {
	      width: 50px;
	      height: 50px;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      margin: 50px 0;
	  }
	
	  .container .box span {
	      position: absolute;
	      box-sizing: border-box;
	      // border: 2px solid #fff;
	      border: none;
	      background: rgba(234,85,20,0.4);
	      border-radius: 50%;
	      animation: animate 2s linear infinite;
	      animation-delay: calc(0.5s * var(--i))
	  }
	
	  @keyframes animate {
	      0% {
	          width: 0;
	          height: 0;
	      }
	
	      50% {
	          opacity: 1;
	      }
	
	      100% {
	          width: 50px;
	          height: 50px;
	          opacity: 0;
	      }
	  }