图标闪烁CSS

图标闪烁CSS代码

<!DOCTYPE html>
<html>

<head>
    <style>
        #markerDiv {
            position: absolute;
            float: left;
            left: 20px;
            top: 20px;
            width: 38px;
            height: 44px;
            background: url(marker.png) no-repeat;
        }

        @-webkit-keyframes flicker {
            0% {
                -webkit-transform: scale(1.2, 1.2);
            }

            50% {
                -webkit-transform: scale(.9, .9);
            }

            100% {
                -webkit-transform: scale(1.2, 1.2);
            }
        }

        @keyframes flicker {
            0% {
                transform: scale(1.2, 1.2);
            }

            50% {
                transform: scale(.9, .9);
            }

            100% {
                transform: scale(1.2, 1.2);
            }
        }

        .flicker-animation {
            animation: flicker 1.5s infinite linear;
            -webkit-animation: flicker 1.5s infinite linear;
        }
    </style>
</head>

<body>
    <div id="markerDiv" class="flicker-animation"></div>
</body>

</html>

用途

电子地图marker闪烁效果

效果图

posted @ 2024-01-17 10:42  0611163  阅读(41)  评论(0)  编辑  收藏  举报