地圖定位點閃爍動畫

地圖上定位圖標的閃爍動畫
效果如下：


動畫效果

HTML

<body>
    <div id="plusDiv"></div>
</body>

CSS

<style>
            #plusDiv {
                margin-left: 100px;
                margin-top: 100px;
                width: 18px;
                height: 18px;
                /*transform: translate3d(0px, 0px, 0px);*/
                position: relative;
                outline: none;
                background-color: #dd524d;
                box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
                border-radius: 100%;
                transform-origin: 0 0;
                display: block;
                opacity: 0.7;
            }
            
            #plusDiv::after {
                content: "";
                -webkit-border-radius: 100%;
                border-radius: 100%;
                height: 300%;
                width: 300%;
                position: absolute;
                margin: -100% 0 0 -100%;
                box-shadow: 0 0 6px 2px #dd524d;
                animation: pulsate 1s ease-out;
                animation-iteration-count: infinite; /*無窮反復*/
                animation-delay: 1.1s;
            }
            
            @keyframes pulsate {
                0% {
                    transform: scale(0.1, 0.1);
                    opacity: 0;
                    filter: alpha(opacity=0);
                }
                50% {
                    opacity: 1;
                    filter: none;
                }
                100% {
                    transform: scale(1.2, 1.2);
                    opacity: 0;
                    filter: alpha(opacity=0);
                }
            }
        </style>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容