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