闪烁动画

最新推荐文章于 2023-02-26 22:16:49 发布

听波の上

最新推荐文章于 2023-02-26 22:16:49 发布

阅读量576

点赞数

分类专栏： JS 文章标签：动画 h5

本文链接：https://blog.csdn.net/u012678833/article/details/79269155

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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>

听波の上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
闪烁动画

地图上定位图标的闪烁动画效果如下： HTMLbody> div id="plusDiv">div>body>CSSstyle> #plusDiv { margin-left: 100px; margin-top: 100px; width:
复制链接

扫一扫