one_day_in_southern_Song_dynasty/src/components/HotSpot.vue

<template>
  <div class="hot-spot">
    <img
      class="hot-spot__img"
      src="@/assets/hotspot.png"
      alt=""
      @dragstart.prevent
    >
  </div>
</template>

<style lang="less" scoped>
.hot-spot {
  width: 50px;
  height: 50px;
  cursor: pointer;
  > .hot-spot__img {
    width: 100%;
    animation: show-hide 1.8s infinite;
  }
}
@keyframes show-hide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>