CSS 通过CSS3动画制作跳动的地图标记

在本文中，我们将介绍如何通过CSS3动画制作一个跳动的地图标记，使其更加生动有趣。

阅读更多：CSS 教程

CSS3动画简介

CSS3引入了一系列新的样式属性，其中之一是@keyframes规则，它允许我们定义动画的关键帧。通过在关键帧之间定义过渡效果，我们可以创建各种各样的动画效果。

初始设置

首先，我们需要在HTML文件中创建一个包含地图标记的元素，并为其添加适当的类。然后，在CSS文件中，我们将为该类定义初始样式。以下是一个简单的示例：

<div class="leaflet-marker"></div>

.leaflet-marker {
    width: 20px;
    height: 20px;
    background-color: #ff0000;
    border-radius: 50%;
    position: absolute;
}

在这个例子中，我们创建了一个红色的圆形标记，它的宽度和高度都是20像素，通过border-radius属性设置为圆形。

制作跳动效果

接下来，我们将使用CSS3动画来制作标记跳动的效果。我们将定义两个关键帧，分别为标记的起始和结束状态。在起始状态，标记将保持原始的位置和大小，而在结束状态，标记将向上跳动一定的距离，并在跳动过程中缩小。

@keyframes pulsate {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(0.8);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

在这个示例中，我们定义了pulsate关键帧，通过transform属性来控制标记的位置和大小。在起始状态（0%），标记的垂直位移为0，缩放比例为1。在中间状态（50%），标记向上跳动10像素并缩小到80%的大小。在结束状态（100%），标记回到原始位置和大小。

应用动画效果

现在，我们需要将动画效果应用到地图标记上。我们可以使用animation属性来指定动画的名称、持续时间、延迟时间、重复次数等。

.leaflet-marker {
    animation-name: pulsate;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

在这个例子中，我们将pulsate动画应用到地图标记上，设置持续时间为1秒，没有延迟时间，无限次重复，并使用线性的时间函数。

自定义动画效果

除了使用默认的动画属性，我们还可以根据需求进行自定义。下面是一些常用的自定义动画属性：

animation-direction：指定动画播放的方向，可以是normal（默认值，从起始状态到结束状态）、reverse（从结束状态到起始状态）或alternate（来回播放）。
animation-fill-mode：指定动画在播放之前和之后的样式，可以是none（默认值，动画不播放时使用初始样式）、forwards（动画播放完之后使用结束样式）、backwards（动画播放之前使用开始样式）或both（同时应用forwards和backwards）。

示例

下面是一个完整的示例，展示如何使用CSS3动画制作一个跳动的地图标记：

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Pulsating Leaflet Marker Example</title>
    <style>
    .leaflet-marker {
        width: 20px;
        height: 20px;
        background-color: #ff0000;
        border-radius: 50%;
        position: absolute;
        animation-name: pulsate;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @keyframes pulsate {
        0% {
            transform: translateY(0) scale(1);
        }
        50% {
            transform: translateY(-10px) scale(0.8);
        }
        100% {
            transform: translateY(0) scale(1);
        }
    }
    </style>
</head>
<body>
    <div class="leaflet-marker"></div>
</body>
</html>