动感十足的地图热点图：用CSS3动画点亮交互

前端

2023-04-17 22:56:57

用CSS3动画打造生动的地图热点图

了解CSS3动画的魅力

CSS3动画的神奇之处在于，它能将原本静态的网页元素变成生动有趣的动态效果。这种能力让网页设计变得更加丰富，特别是当它与地图相结合时，就能创造出精美的热点图，让用户直观地获取关键信息。

地图热点图的制作需求

设想这样一个场景：我们要制作一个地图热点图，在地图上标记出多个热点位置。当用户将鼠标悬停在某个热点上时，该热点会显示相关信息，同时还有一个波纹效果的小圆点从热点中心向外扩散。

动画代码分析：逐一拆解

要实现这样的动画效果，我们需要深入了解背后的代码：

1. 地图背景设置：勾勒地图轮廓

首先，需要设置地图背景，这可以是一张图片或一个svg文件，为地图提供一个基本的轮廓。

2. 热点位置测量：精准定位热点

接着，需要测量热点的位置，这样才能准确设置动画的位置。getBoundingClientRect()方法可以轻松获取热点的坐标。

3. 热点动画布局：确定动画范围

根据热点的形状和大小，我们可以确定动画的范围，再根据热点的中心位置确定动画的位置，这样才能让动画恰到好处地覆盖热点。

4. 动画定义：关键帧逐帧描绘

现在，可以使用@keyframes规则来定义动画的关键帧，就好比动画中的一个个关键场景。然后，通过animation属性，将动画应用到目标元素上。

5. 小圆点实现：波纹效果源头

为了实现小圆点效果，可以创建一个div元素，并设置其border-radius为50%，使其成为一个小圆点。接着，通过animation属性，让小圆点从热点中心向外扩散。

6. 波纹效果盒子：扩散波纹边界

为了创建波纹效果盒子，我们可以使用一个div元素，并设置其border为1px solid #ccc，形成一个盒子。同样通过animation属性，让盒子从热点中心向外扩散，形成波纹效果的边界。

7. 延迟动画设置：时机恰到好处

为了让动画更加自然流畅，可以利用animation-delay属性来延迟动画的开始时间，这样动画就不会在热点被悬停的瞬间突然出现，而是会在略微延迟后才开始播放。

代码示例：让代码发挥魔力

以下是实现上述动画效果的完整代码示例：

<div class="map">
  <img src="map.png" alt="Map">
  <div class="hotspot" data-title="Paris">
    <div class="dot"></div>
    <div class="ripple"></div>
  </div>
  <div class="hotspot" data-title="London">
    <div class="dot"></div>
    <div class="ripple"></div>
  </div>
  <div class="hotspot" data-title="Rome">
    <div class="dot"></div>
    <div class="ripple"></div>
  </div>
</div>

.map {
  position: relative;
  width: 600px;
  height: 400px;
}

.map img {
  width: 100%;
  height: 100%;
}

.hotspot {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.hotspot:hover .dot {
  animation: dot 1s ease-in-out infinite;
}

.hotspot:hover .ripple {
  animation: ripple 1s ease-in-out infinite;
}

@keyframes dot {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}