地图定位点闪烁动画

地图上定位图标的闪烁动画
效果如下:


动画效果

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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容