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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0