地域图谱标点效果

杨磊

2024-05-20 e8ef9ac64bbfd443d01f230da370bf5b9ecb14b7

地域图谱标点效果

 src/pages/territory/territory.vue

@@ -150,7 +150,13 @@
    <!-- 朝代 -->
    <view
      class="flex flex-center"
      style="width: 100%; position: fixed; bottom: 0.33rem; left: 0; z-index: 99;"
      style="
        width: 100%;
        position: fixed;
        bottom: 0.33rem;
        left: 0;
        z-index: 99;
      "
    >
      <ul class="flex">
        <li
@@ -498,7 +504,7 @@
              break;
          }
          let icon = L.divIcon({
            html: `<div class='${currentClassName}'></div>`,
            html: `<div class='${currentClassName} ripple'></div>`,
            iconSize: [80, 80],
            className: "map-circle",
          });
@@ -738,4 +744,31 @@
  font-size: 14px !important;
  z-index: 10 !important;
}

::v-deep .ripple {

  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

::v-deep .ripple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%; /* Ensure it covers the entire parent */
  height: 150%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: ripple-animation 1s infinite linear;
}

@keyframes ripple-animation {
  to {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}
</style>