将CSS脉动圆定位在图像地图区域圆上

我想创建一个CSS脉动动画效果（圆形），作为覆盖到图像贴图区域圆形的确切位置。我能够独立于包含图像贴图的主Div创建并定位CSS脉冲效果，但我无法将脉动CSS圆效果精确绑定到图像贴图区域圆上

我还希望将此解决方案作为响应性解决方案来实施

如果能找到解决办法，那就太好了

/*CSS*/
.脉冲圈{
位置：绝对位置；
左：48%；
最高：26%；
/*填充：60%10%*/
-webkit转换：translateX（-50%）translateY（-50%）；
转化：translateX（-50%）translateY（-50%）；
宽度：30px；
高度：30px；
}
.搏动圈：前{
内容：''；
位置：相对位置；
显示：块；
宽度：300%；
身高：300%；
框大小：边框框；
左边距：-100%；
利润率最高：-100%；
边界半径：45px；
背景色：#01a4e9；
-webkit动画：脉冲环1.25s立方贝塞尔（0.215,0.61,0.355,1）无限；
动画：脉冲环1.25s立方贝塞尔（0.215,0.61,0.355,1）无限大；
}
.脉冲圈：之后{
内容：''；
位置：绝对位置；
左：0；
排名：0；
显示：块；
宽度：100%；
身高：100%；
不透明度：0.5；
背景色：淡黄花；
边界半径：15px；
盒影：0.08像素rgba（0,0,0,0.3）；
-webkit动画：脉冲点1.25s立方贝塞尔（0.455,0.03,0.515,0.955）-0.4s无限；
动画：脉冲点1.25s立方贝塞尔（0.455,0.03,0.515,0.955）-0.4s无限；
}
@-webkit关键帧脉冲环{
0% {
-webkit变换：比例（0.33）；
变换：比例（0.33）；
}
80%,
100% {
不透明度：0；
}
}
@关键帧脉冲环{
0% {
-webkit变换：比例（0.33）；
变换：比例（0.33）；
}
80%,
100% {
不透明度：0；
}
}
@-webkit关键帧脉冲点{
0% {
-webkit变换：比例（0.8）；
变换：比例（0.8）；
}
50% {
-webkit转换：规模（1）；
变换：比例（1）；
}
100% {
-webkit变换：比例（0.8）；
变换：比例（0.8）；
}
}
@关键帧脉冲点{
0% {
-webkit变换：比例（0.8）；
变换：比例（0.8）；
}
50% {
-webkit转换：规模（1）；
变换：比例（1）；
}
100% {
-webkit变换：比例（0.8）；
变换：比例（0.8）；
}
}
.集装箱{
宽度：100%；
高度：自动；
}