react framer-motion实现地图锚点悬浮放大动画效果代码-html代码-BFW代码库

react framer-motion实现地图锚点悬浮放大动画效果代码

代码语言：html

所属分类：悬停

代码描述：react framer-motion实现地图锚点悬浮放大动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
body {
  background: rebeccapurple;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.e-marker {
  cursor: pointer;
}
.e-marker__marker {
  fill: #fff;
}
.e-marker__icon {
  fill: #fff;
  transform: scale(1);
  transform-origin: 50% 50%;
}
.e-marker__image {
  transform: scale(0);
  transform-origin: 50% 50%;
}
.e-marker__circle {
  display: none;
  fill: #ec008c;
  opacity: 0.5;
}
.e-marker__loader {
  fill: #fff;
  transform-origin: 50% 50%;
  transform: scale(0);
}
.e-marker__text {
  font-size: 12px;
  font-family: brandon-grotesque, verdana, helvetica, sans-serif;
  text-align: center;
  color: #fff;
  fill: #fff;
  transform-origin: 50% 50%;
  alignment-baseline: middle;
  text-anchor: middle;
}
</style>



</head>

<body >
  <div id="root"></div>
    

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/framer-motion.js"></script>
      <script  >
const { motion, useMotionValue } = Motion;

// 🏄 ICONS
const icons = {
  iconCity: /*#__PURE__*/
  React.createElement("path", {
    className: "e-marker__icon e-marker__icon--city",
    d: "M41.1,68.7V58.5L36,53.4l-5.1,5.1v3.4H20.8v23.7h30.5V68.7H41.1z M27.5,82.2h-3.4v-3.4h3.4V82.2z M27.5,75.4h-3.4 V72h3.4V75.4z M27.5,68.7h-3.4v-3.4h3.4V68.7z M37.7,82.2h-3.4v-3.4h3.4V82.2z M37.7,75.4h-3.4V72h3.4V75.4z M37.7,68.7h-3.4v-3.4 h3.4V68.7z M37.7,61.9h-3.4v-3.4h3.4V61.9z M47.9,82.2h-3.4v-3.4h3.4V82.2z M47.9,75.4h-3.4V72h3.4V75.4z" }),




  iconBeach: /*#__PURE__*/
  React.createElement("path", {
    className: "e-marker__icon e-marker__icon--beach",
    d: "M38.3,74.8l2.9-2.9L54,84.8l-2.9,2.9L38.3,74.8z M46.8,63.3l5.7-5.7c-7.9-7.9-20.7-7.9-28.6,0C31.8,55,40.6,57.1,46.8,63.3z M23.9,57.6c-7.9,7.9-7.9,20.7,0,28.6l5.7-5.7C23.4,74.2,21.3,65.5,23.9,57.6z M23.9,57.6L23.9,57.6c-0.8,6,2.3,13.8,8.6,20.1 L44,66.2C37.7,59.9,30,56.8,23.9,57.6z" }),




  iconMountain: /*#__PURE__*/
  React.createElement("path", {
    className: "e-marker__icon e-marker__icon--mountain",
    d: "M39.5,58.8l-6.6,8.8l5,6.7l-2.8,2.1c-3-3.9-7.9-10.5-7.9-10.5l-10.5,14h38.6L39.5,58.8z" }),


  iconJungle: /*#__PURE__*/
  React.createElement("g", { className: "e-marker__icon e-marker__icon--jungle" }, /*#__PURE__*/
  React.creat.........完整代码请登录后点击上方下载按钮下载查看