pulse map dots

HTML

<div class="image-map" style="height: 800px;width:100%;background: url('https://picsum.photos/800/800') center no-repeat; background-size: cover; position: relative;">
<div class="pulsating-circle circle1" onclick="window.open('#1','_blank');">&nbsp;</div>
<div class="pulsating-circle circle2" onclick="window.open('#2','_blank');">&nbsp;</div>
<div class="pulsating-circle circle3" onclick="window.open('#3','_blank');">&nbsp;</div>
<div class="pulsating-circle circle4" onclick="window.open('#4','_blank');">&nbsp;</div>
</div>

CSS

/* Pulse Map Dots */

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
  }

  .pulsating-circle:before {
    content: "";
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #F00;
    -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
            animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }

  .pulsating-circle::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #FFFFFF75;
	border-radius: 15px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
	animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

.circle1 {
    cursor:pointer;
	position: absolute;
	left: 25%;
	top: 25%;
	transform: translateX(-50%) translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 100px;
	background: transparent;
}
.circle2 {
    cursor:pointer;
	position: absolute;
	left: 75%;
	top: 75%;
	transform: translateX(-50%) translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 100px;
	background: transparent;
}
.circle3 {
    cursor:pointer;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 100px;
	background: transparent;
}
.circle3 {
    cursor:pointer;
	position: absolute;
	left: 25%;
	top: 75%;
	transform: translateX(-50%) translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 100px;
	background: transparent;
}

  @-webkit-keyframes pulse-ring {
    0% {
      transform: scale(0.33);
    }
    80%, 100% {
      opacity: 0;
    }
  }
   
  @keyframes pulse-ring {
    0% {
      transform: scale(0.33);
    }
    80%, 100% {
      opacity: 0;
    }
  }
  @-webkit-keyframes pulse-dot {
    0% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  @keyframes pulse-dot {
    0% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }