zdzb_saber/public/bigemap/MarkerCluster.Default.css

.bigemap-cluster-anim .bigemap-marker-icon, .bigemap-cluster-anim .bigemap-marker-shadow {
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.bigemap-cluster-spider-leg {
	/* stroke-dashoffset (duration and function) should match with bigemap-marker-icon transform in order to track it exactly */
	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

.marker-cluster-small {
	/*background-color: rgba(181, 226, 140, 0.6);*/
  box-shadow: 0px 2px 8px 0px rgba(11, 219, 168, 0.5)
	}
.marker-cluster-small div {
	background-color: #0BDBA8;
	}

.marker-cluster-medium {
	background-color: #fff;
	}
.marker-cluster-medium div {
	background-color: #FFB540;
	}

.marker-cluster-large {
	background-color: #fff;
	}
.marker-cluster-large div {
	background-color: #F52F3E;
	}

	/* IE 6-8 fallback colors */
.bigemap-oldie .marker-cluster-small {
	background-color: rgb(181, 226, 140);
	}
.bigemap-oldie .marker-cluster-small div {
	background-color: rgb(110, 204, 57);
	}

.bigemap-oldie .marker-cluster-medium {
	background-color: rgb(241, 211, 87);
	}
.bigemap-oldie .marker-cluster-medium div {
	background-color: rgb(240, 194, 12);
	}

.bigemap-oldie .marker-cluster-large {
	background-color: rgb(253, 156, 115);
	}
.bigemap-oldie .marker-cluster-large div {
	background-color: rgb(241, 128, 23);
}

.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
	}
.marker-cluster div {
	width: 36px;
	height: 36px;
	margin-left: 2px;
	margin-top: 2px;

	text-align: center;
	border-radius: 18px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
	}
.marker-cluster span {
	line-height: 36px;
  color: #FFF;
	}



.pulse-icon {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: #33FF66;
  position: relative;
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
}

.pulse-icon:after {
  content: "";
  box-shadow: 0 0 6px 2px #2f8;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  animation-delay: 1.1s;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  height: 300%;
  width: 300%;
  animation: pulsate 2s infinite;
  position: absolute;
  margin: -100% 0 0 -150%;
}

/*#green::after{*/
/*  box-shadow: 0 0 6px 2px var(--gre) ;*/
/*}*/
/*#yel::after{*/
/*  box-shadow: 0 0 6px 2px var(--yel) ;*/
/*}*/
/*#red::after{*/
/*  box-shadow: 0 0 6px 2px var(--red) ;*/
/*}*/

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }

  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
.contextmenus{
  border-radius: 5px;
}
.contextmenus span{
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

/* 活跃图标所需样式 */
.pulse-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #2f8;
  position: relative;
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
}

.pulse-icon:after {
  content: '';
  box-shadow: 0 0 6px 2px #2f8;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  animation-delay: 1.1s;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  height: 300%;
  width: 300%;
  animation: pulsate 2s infinite;
  position: absolute;
  margin: -100% 0 0 -100%;
}

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    filter: alpha(opacity=0);
  }

  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    filter: alpha(opacity=0);
  }
}
.demo-drawer__content{
  padding: 15px;
  box-sizing: border-box;
}
.pulse-icon {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-color: #33FF66;
  position: relative;
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
}

.pulse-icon:after {
  content: "";
  box-shadow: 0 0 6px 2px #2f8;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  animation-delay: 1.1s;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  height: 300%;
  width: 300%;
  animation: pulsate 2s infinite;
  position: absolute;
  margin: -100% 0 0 -100%;
}

/*#green::after{*/
/*  box-shadow: 0 0 6px 2px var(--gre) ;*/
/*}*/
/*#yel::after{*/
/*  box-shadow: 0 0 6px 2px var(--yel) ;*/
/*}*/
/*#red::after{*/
/*  box-shadow: 0 0 6px 2px var(--red) ;*/
/*}*/

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }

  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}