css3实现类似地图定位循环扩散光圈效果

为了实现这种效果，我们可以使用CSS3的动画和圆形边框来创建一个光环效果，并通过CSS变量共享颜色和动画时长。以下是一个简单的实现示例：

HTML:

<div class="map-marker"></div>

CSS:

:root {
  --duration: 2s;
  --color: #FFD255; /* 光环颜色 */
}
 
.map-marker {
  width: 100px;
  height: 100px;
  background-color: #333; /* 地图标记颜色 */
  border-radius: 50%; /* 圆形地图标记 */
  position: relative;
  animation: pulse var(--duration) infinite alternate;
}
 
.map-marker::before,
.map-marker::after {
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color);
  opacity: 0;
  animation: pulse-ring var(--duration) infinite alternate;
}
 
.map-marker::before {
  animation-delay: calc(var(--duration) / 2);
}
 
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
 
@keyframes pulse-ring {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

这段代码会创建一个圆形的地图标记，并在其中心位置显示一个光环，光环会不停地扩张和收缩，模拟出一种类似于地图上的定位循环扩散光圈的效果。通过CSS变量，我们可以轻松地调整光环的颜色和动画时长。