.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); } }