图标闪烁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 @   0611163  阅读(110)  评论(2编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
历史上的今天:
2023-01-17 C#调用js库的方法
点击右上角即可分享
微信分享提示