Google Map Marker pulse animation?

后端 未结 4 1239
不思量自难忘°
不思量自难忘° 2021-01-30 15:08

I wonder is there any way to make Google Map Marker to pulse? Like here: http://plebeosaur.us/etc/map/

4条回答
  •  一向
    一向 (楼主)
    2021-01-30 15:43

    The link you provide uses pure css to make this animation :

    @-moz-keyframes pulsate {
        from {
            -moz-transform: scale(0.25);
            opacity: 1.0;
        }
        95% {
            -moz-transform: scale(1.3);
            opacity: 0;
        }
        to {
            -moz-transform: scale(0.3);
            opacity: 0;
        }
    }
    @-webkit-keyframes pulsate {
        from {
            -webkit-transform: scale(0.25);
            opacity: 1.0;
        }
        95% {
            -webkit-transform: scale(1.3);
            opacity: 0;
        }
        to {
            -webkit-transform: scale(0.3);
            opacity: 0;
        }
    }
    /* get the container that's just outside the marker image, 
        which just happens to have our Marker title in it */
    #map_canvas div.gmnoprint[title="I might be here"] {
        -moz-animation: pulsate 1.5s ease-in-out infinite;
        -webkit-animation: pulsate 1.5s ease-in-out infinite;
        border:1pt solid #fff;
        /* make a circle */
        -moz-border-radius:51px;
        -webkit-border-radius:51px;
        border-radius:51px;
        /* multiply the shadows, inside and outside the circle */
        -moz-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
        -webkit-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
        box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
        /* set the ring's new dimension and re-center it */
        height:51px!important;
        margin:-18px 0 0 -18px;
        width:51px!important;
    }
    
    
    /* hide the superfluous marker image since it would expand and shrink with its containing element */
    /*  #map_canvas div[style*="987654"][title] img {*/
        #map_canvas div.gmnoprint[title="I might be here"] img {
            display:none;
        }
        /* compensate for iPhone and Android devices with high DPI, add iPad media query */
        @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
            #map_canvas div.gmnoprint[title="I might be here"] {
                margin:-10px 0 0 -10px;
            }
        }
    

    Can confirm it works on my website when I copy their code and their css

提交回复
热议问题