react实现滑动卡片更换效果代码

代码语言:html

所属分类:幻灯片

代码描述:react实现滑动卡片更换效果代码

代码标签: 卡片 更换 效果

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@500;800&display=swap");

body {
  margin: 0;
}

.App {
  align-items: center;
  background-color: #3b4969;
  display: flex;
  font-family: "Assistant";
  justify-content: center;
  height: 100vh;
}

.container {
  background-color: #fed5d5;
  border-radius: 16px;
  box-shadow: 0 0.4px 3.6px rgba(0, 0, 0, 0.004),
    0 1px 8.5px rgba(0, 0, 0, 0.01), 0 1.9px 15.7px rgba(0, 0, 0, 0.019),
    0 3.4px 28.2px rgba(0, 0, 0, 0.03), 0 6.3px 54.4px rgba(0, 0, 0, 0.047),
    0 15px 137px rgba(0, 0, 0, 0.07);
  height: 440px;
  overflow: hidden;
  position: relative;
  width: 256px;
}

.title {
  margin-top: 36px;
  position: absolute;
  text-align: center;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.title1 {
  font-size: 36px;
  font-weight: 700;
}

.title2 {
  color: #3b4969;
  font-size: 16px;
}

.blob {
  left: 28px;
  position: absolute;
  top: 96px;
}

.person {
  position: absolute;
  transform-origin: 50% 1000px;
  top: 94px;
  left: 30px;
}

.person1 {
  transform: rotate(0);
}

.person2 {
  transform: rotate(20deg);
}

.person3 {
  transform: rotate(40deg);
}

.person4 {
  transform: rotate(60deg);
}

.text {
  bottom: 48px;
  font-size: 12px;
  line-height: 18px;
  padding: 24px;
  position: absolute;
  text-align: center;
}

.navDots {
  bottom: 40px;
  display: flex;
  justify-content: space-between;
  left: 50%;
  margin: auto;
  position: absolute;
  transform: translateX(-50%);
  width: 72px;
}

.navDot {
  background: black;
  border-radius: 3px;
  height: 6px;
  width: 6px;
}
</style>



</head>

<body>
  <div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-use-gesture.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-spring-web.js"></script>
      <script  >
function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(0)) break;var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}window.CP.exitedLoop(0);return target;};return _extends.apply(this, arguments);}const { useState, useEffect } = React;
const { useSpring, animated, config } = ReactSpring;
const { useDrag } = ReactUseGesture;

function P1() {
  return (
    React.createElement("svg", { viewBox: "0 0 100 120", height: "240", width: "200" },
    React.createElement("path", {
      d: "M58.918 76.63l1.208-2.097c.63-1.094 1.51-2.026 2.567-2.718l1.86-1.22c.442-.29 1.04-.112 1.25.372.18.41.093.886-.22 1.205l-1.65 1.686 8.886-2.546c.38-.117.778.126.846.52l.046.262c.055.31-.118.616-.41.73l-5.216 1.673 6.257-1.093c.386-.092.766.174.81.57l.023.195c.037.33-.178.64-.503.717l-6.476 1.33 5.37-.11c.422-.018.753.36.68.775l-.014.084c-.05.286-.28.505-.568.543l-5.59.72 3.432.002c.488 0 .808.51.596.95-.1.208-.304.35-.535.37L59.07 80.71l-.152-4.08",
      fill: "#f79467" }),

    React.createElement("path", {
      d: "M78.19 31.872s1.237 7.694 4.008 12.015c.52.81.243 1.917-.56 2.435-3.128 2.022-11.934 5.857-23.18 1.466-.744-.29-1.2-1.065-1.108-1.88.23-2.08 2.035-6.163 4.688-9.826l16.152-4.21",
      fill: "#f25b36" }),

    React.createElement("path", {
      d: "M62.595 39.01c-.416 1.373-1.868 2.15-3.242 1.733-1.374-.416-2.15-1.868-1.734-3.242.415-1.373 1.867-2.15 3.24-1.733 1.375.416 2.15 1.868 1.735 3.242",
      fill: "#f79368" }),

    React.createElement("path", {
      d: "M65.63 44.292l.25 10.526 8.2-.958-1.554-15.474-6.897 5.906",
      fill: "#f89f77" }),

    React.createElement("path", {
      d: "M65.725 48.198s3.73-.19 3.89-4.43l-3.952 2.092.062 2.338",
      fill: "#25101f" }),

    React.createElement("path", {
      d: "M60.756 28.977c-.656.555-1.074 1.333-1.242 2.172-.497 2.486-1.474 7.66-.594 10.3 1.146 3.433 3.933 5.604 8.44 4.747 0 0 5.22-.238 6.51-7.91 1.826-10.887-7.5-14.056-13.114-9.31",
      fill: "#f89f77" }),

    React.createElement("path", {
      d: "M60.464 36.942c-.083.318-.408.508-.726.424-.318-.083-.508-.408-.424-.726.083-.318.41-.508.726-.424.318.083.508.41.424.726M65.492 37.043c-.084.318-.41.508-.727.424-.318-.083-.507-.41-.424-.726.085-.317.41-.507.728-.423.317.083.507.408.424.726M61.354 38.218l-.588 1.417c-.014.034-.013.072.004.105.016.033.046.057.08.067l.954.257c.07.018.14-.022.157-.09.02-.07-.02-.14-.09-.157l-.81-.22.53-1.28c.028-.066-.003-.14-.068-.168-.066-.028-.14.003-.168.068",
      fill: "#25101f" }),

    React.createElement("path", {
      d: "M65.51 33.424s-1.845-.326-1.943.522c0 0-.053.575 1.56.825s2.257.21 2.456-.32c.2-.527-1.202-.948-2.074-1.026M59.215 33.454s1.607-.35 1.837.46c0 0 .146.556-1.267.824-1.028.195-1.412.018-1.516-.354-.125-.44.337-.848.945-.93",
      fill: "#f25b36" }),

    React.createElement("path", {
      d: "M61.407 41.03l3.313.056s.007 1.334-1.68 1.317c-1.69-.017-1.633-1.372-1.633-1.372",
      fill: "#fff" }),

    React.createElement("path", {
      d: "M71.893 37.477s-2.726-2.413-2.184-7.106c0 0-4.632.823-10.128.414 0 0 1.227-7.255 11.68-5.515 10.86 1.807 6.855 14.368 2.818 18.047l-2.187-5.84",
      fill: "#f25b36" }),

    React.createElement("path", {
      d: "M77.147 39.59c-.506 1.666-2.267 2.61-3.934 2.103-1.668-.505-2.61-2.267-2.105-3.934.506-1.67 2.267-2.61 3.935-2.105 1.667.505 2.61 2.267 2.104 3.934",
      fill: "#f89f77" }),

    React.createElement("path", {
      d: "M75.586 37.63c-.008-.003-.29-.084-.69-.084-.382 0-.875.075-1.33.374-.455.298-.86.822-1.068 1.683-.016.07.026.138.095.155.068.016.137-.026.154-.095.197-.81.562-1.267.96-1.53.398-.262.84-.33 1.19-.33.182 0 .338.018.45.036.054.01.097.018.126.025l.033.008.01.002c.067.02.138-.02.158-.087.02-.068-.02-.14-.088-.16",
      fill: "#25101f" }),

    React.createElement("path", {
      d: "M67.303 25.028c.014-.013-9.085.155-10.223 7.385l14.398.322.862-4.812-5.037-2.895",
      fill: "#f25b36" }),

    React.createElement("path", {
      d: "M55.62 72.507l1 13.62-5.62 17.14h6.237l9.725-9.396-1.045-20.49-10.298-.873",
      fill: "#f89f77" }),

    React.createElement("path", {
      d: "M58.093 56.14s-7.11 5.133-5.016 21.608H64.71l-6.617-21.61",
      fill: "#fff" }),

    React.createElement("path", {
      d: "M60.993 85.95l-3.913 17.216c14.604 4.126 28.18 0 28.18 0s-.76-6.61-5.836-17.332l-18.43.117",
      fill: "#25101f" }),

    React.createElement("path", {
      d: "M77.72 53.032l-14.29.24s-3.13 1.05-5.337 2.867l.447 12.047 2.453 17.764 18.43-.116L83.05 58.23l-5.33-5.198",
      fill: "#fff" }),

    React.createElement("path", {
      d: "M69.928 50.953s3.647.346 7.79 2.08c0 0-1.19 4.636-8.046 4.657-1.147.003-2.297-.17-3.36-.6-1.425-.577-3.09-1.71-2.88-3.82l6.496-2.317",
      fill: "#f89f77" }),

    React.createElement("path", {
      d: "M59.836 77.42l-1.33-9.723c-.018-.14-.147-.238-.287-.22-.142.02-.24.15-.22.29l1.328 9.722c.02.14.148.238.29.22.14-.02.237-.15.218-.29",
      fill: "#d5d5d3" }),

    React.createElement("path", {
      d: "M87.764 86.594c.032-.364-.652-17.102-.652-17.102h-7.905l-.124 12.472 8.68 4.63",
      fill: "#f89f77" }),

    React.createElement("path", {
      d: "M77.72 53.032s9.812 2.723 11.006 8.82C89.92 67.946 92.81 78.12 92.81 78.12l-15.09.044 1.134-20.474-1.135-4.658",
      fill: "#fff" }),

    React.createElement("path", {
      d: "M78.52 79.19l-1.276-9.054c-.02-.14-.15-.238-.29-.218-.14.02-.237.15-.217.29l1.276 9.053c.02.14.15.24.29.22.14-.02.237-.15.217-.29",
      fill: "#d5d5d3" }),

    React.createElement("path", {
      d: "M66.808 69.504l-1.88 3.65 16.03 16.094c2.063 1.716 5.187 1.066 6.395-1.33 1.005-1.993.264-4.424-1.68-5.518l-2.25-1.537-3.948-2.7-12.667-8.66",
      fill: "#f89f77" }),

    React.createElement("path", {
      d: "M68.015 70.413l-.01-2.42c-.003-1.265-.304-2.51-.878-3.635l-1.01-1.982c-.24-.47-.846-.613-1.27-.298-.36.266-.52.723-.407 1.155l.597 2.284-5.778-6.27c-.274-.29-.915-.24-1.17.068-.2.242-.274.68-.076.924l3.1 3.77-4.24-3.74c-.29-.27-.86-.195-1.096.125-.197.27-.162.778.08 1.007l4.904 4.315-4.608-2.76c-.358-.225-.832-.062-.975.336l-.03.08c-.1.272-.008.577.223.752l4.494 3.4-2.98-1.7c-.423-.243-.954.04-.988.528-.017.23.09.454.28.587l9.68 6.938 2.155-3.465",
      fill: "#f89f77" }),

    React.createElement("path", {
      d: "M79.64 78.56l4.567 3.123c.107.073.253.045.326-.06.073-.108.045-.254-.06-.327l-4.568-3.123c-.107-.073-.253-.045-.326.06-.075.108-.047.254.06.327",
      fill: "#f68b5c" })));



}

function P2() {
  return (
    React.createElement("svg", { viewBox: "0 0 100 120", height: "240", width: "200" },
    React.createElement("defs", null,
    React.createElement("clipPath", { id: "a" },
    React.createElement("path", { d: "M5537.66 2888.01l141.95-5.38s-3.12-61.44-72.86-61.44c-69.35 0-69.09 66.82-69.09 66.82" }))),


    React.createElement("path", {
      d: "M39.888 39.78c.335 1.483 1.808 2.414 3.29 2.08 1.483-.336 2.413-1.81 2.08-3.292-.336-1.483-1.81-2.413-3.292-2.078-1.483.335-2.413 1.808-2.078 3.29",
      fill: "#8e3c3a" }),

    React.createElement("path", {
      d: "M37.074 45.836l-.248 10.82-9.855-.705 2.003-17.585 8.1 7.47",
      fill: "#9d4c45" }),

    React.createElement("path", {
      d: "M36.973 50.37s-5.357-.445-5.615-6.85l5.716 2.624-.1 4.226",
      fill: "#190f0d" }),

    React.createElement("path", {
      d: "M39.162 27.35c2.472.977 4.135 3.318 4.41 5.962.317 3.044.6 7.76-.347 10.072-1.463 3.573-4.57 5.667-9.266 4.394 0 0-5.5-.67-6.296-8.962-.94-9.812 5.946-13.657 11.498-11.465",
      fill: "#9d4c45" }),

    React.createElement("path", {
      d: "M41.953 37.498c.064.34.393.567.735.503.342-.063.567-.392.503-.734-.063-.342-.392-.567-.734-.503-.34.064-.567.393-.503.735M36.637 37.22c.065.342.393.567.735.503.342-.064.568-.392.503-.734-.064-.343-.393-.568-.734-.504-.34.063-.566.392-.503.734",
      fill: "#190f0d" }),

    React.createElement("path", {
      d: "M40.92 37.886l.445 1.815c.01.04.014.08.014.117 0 .228-.16.43-.395.477l-.665.128c-.074.014-.146-.034-.16-.108-.014-.074.034-.146.108-.16l.665-.13c.103-.018.173-.108.173-.207l-.006-.05-.447-1.815c-.018-.074.027-.148.1-.166.074-.018.148.027.166.1",
      fill: "#25101f" }),

    React.createElement("path", {
      d: "M36.068 33.133s1.97-.41 2.076.653c0 0 .056.72-1.667 1.033-1.724.312-2.412.26-2.625-.4-.212-.663 1.284-1.19 2.216-1.287M43.388 33.23s-1.806-.51-2.037.52c0 0-.142.704 1.444 1.1 1.155.29 1.577.08 1.68-.393.125-.56-.405-1.1-1.086-1.227M41.105 41.556l-3.835.145s.084 1.66 1.968 1.66c1.874 0 1.867-1.804 1.867-1.804",
      fill: "#190f0d" }),

    React.createElement("g", {
      "clip-path": "url(#a)",
      transform: "matrix(-.02702 0 0 -.02702 190.712 119.58)" },

    React.createElement("path", {
      d: "M5683.65 2782.45c-12.23-26.64-43.75-38.33-70.39-26.1-26.64 12.23-38.32 43.75-26.09 70.39s43.75 38.32 70.39 26.09 38.32-43.74 26.09-70.38",
      fill: "#e057b3" })),


    React.createElement("path", {
      d: "M30.213 38.807s2.225-4.19 1.418-8.75c0 0 6.797 1.14 10.727-.112 0 0-.923-5.605-10.063-4.88-12.517.992-8.86 14.33-2.89 16.613l.81-2.87",
      fill: "#190f0d" }),

    React.createElement("path", {
      d: "M24.084 40.172c.406 1.8 2.194 2.928 3.993 2.522 1.8-.407 2.928-2.195 2.522-3.994-.407-1.8-2.195-2.928-3.995-2.522-1.8.407-2.927 2.195-2.52 3.994",
      fill: "#9d4c45" }),

    React.createElement("path", {
      d: "M25.88 38.22c.008 0 .208-.043.508-.043.39 0 .95.07 1.466.406s.97.94 1.138 1.958c.012.076-.038.146-.112.16-.075.01-.145-.04-.158-.114-.16-.958-.568-1.478-1.017-1.774-.45-.295-.96-.362-1.317-.36-.137 0-.25.008-.33.018l-.092.013-.023.004h-.005c-.074.017-.147-.03-.163-.105-.015-.073.032-.146.106-.16",
      fill: "#25101f" }),

    React.createElement("path", {
      d: "M50.443 73.544v16.042l7.524 13.18-7.394-.872-8.964-8.66.962-18.885 7.87-.806",
      fill: "#9d4c45" }),

    React.createElement("path", {
      d: "M45.325 57.798s5.835 3.407 6.77 11.83v11.976l-9.523-.326 2.753-23.48",
      fill: "#2c5aa0" }),

    React.createElement("path", {
      d: "M38.144 55.065s4.78.912 7.18 2.733l.71 43.015c-15.352 9.26-32.905.27-32.905.27l4.76-43.062s.622-2.427 7.293-2.947l12.96-.008",
      fill: "#2c5aa0" }),

    React.createElement("path", {
      d: "M25.183 55.073s5.507-1.215 12.96-.008c0 0 .71 4.432-5.278 4.618-6.484.203-7.682-4.61-7.682-4.61",
      fill: "#9d4c45" }),

    React.createElement("path", {
      d: "M45.478 81.603l.057-15.087c0-.127.103-.23.23-.23s.23.104.23.23l-.058 15.09c0 .126-.103.228-.23.228s-.23-.104-.23-.23",
      fill: "#162d50" }),

    React.createElement("path", {
      d: "M32.593 80.43s1.064-3.07 4.86-3.86l2.67-2.622c.415-.407 1.066-.447 1.526-.093.498.384.602 1.094.234 1.604l-1.314 1.826.72-.31c1.146-.494 2.09-1.36 2.683-2.457l1.685-3.124c.192-.355.562-.578.965-.58.78-.007 1.322.776 1.04 1.504l-1.686 4.373c-.654 1.695-2.007 3.025-3.713 3.65l-8.528 3.794-1.143-3.707",
      fill: "#9d4c45" }),

    React.createElement("path", {
      d: "M32.593 80.43L8.877 89.505c-2.05.887-3.044 4.378-2.128 6.416 1.018 2.268 3.835 3.07 5.895 1.678l21.09-13.46-1.142-3.708",
      fill: "#9d4c45" }),

    React.createElement("path", {
      d: "M6.436 93.562l2.48-19.168 11.503-.85-4.032 17.08-9.952 2.938",
      fill: "#9d4c45" }),

    React.createElement("path", {
      d: "M20.78 55.9S6.406 58.267 4.71 81.603h17.677l1.162-15.1-2.77-10.605",
      fill: "#2c5aa0" }),

    React.createElement("path", {
      d: "M18.517 81.375h3.136l2.035-11.86c.02-.124.14-.208.265-.187.125.022.21.14.187.266l-2.067 12.05c-.02.11-.115.19-.227.19h-3.33c-.126 0-.23-.103-.23-.23s.104-.23.23-.23",
      fill: "#162d50" })));



}

function P3() {
  return (
    React.createElement("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 100 120",
      height: "240",
      width: "200" },

    React.createElement("defs", null,
    React.createElement("clipPath", { id: "a" },
    React.createElement("path", { d: "M3498.05 2734.47l-159.3-1.82s3.29-68.84 77.04-68.84c73.32 0 82.26 70.66 82.26 70.66" }))),


    React.createElement("path", {
      d: "M81.136 39.23s-.675 4.144.416 5.235c2.08 2.08 8.47 3.05 5.098 11.953H57.253s-1.455-3.545 1.83-5.606c0 0 1.142-.798.44-3.202-.7-2.403 1.047-4.11 3.19-6.678l4.218-6.853 14.206 5.15",
      fill: "#a40" }),

    React.createElement("path", {
      d: "M81.178 38.62c0 5.292-4.496 9.583-10.042 9.583-5.546 0-10.042-4.29-10.042-9.584s4.496-9.585 10.042-9.585c5.546 0 10.042 4.29 10.042 9.584",
      fill: "#a40" }),

    React.createElement("path", {
      d: "M64.61 42.97c-.416 1.373-1.867 2.15-3.24 1.733-1.374-.417-2.15-1.868-1.733-3.24.416-1.375 1.867-2.15 3.24-1.734 1.374.415 2.15 1.866 1.733 3.24",
      fill: "#f68351" }),

    React.createElement("path", {
      d: "M67.643 48.25l.25 11.522 8.348-.466-1.703-16.96-6.894 5.904",
      fill: "#f79467" }),

    React.createElement("path", {
      d: "M67.744 51.775s3.723-.384 3.884-4.622l-3.95 2.09.066 2.532",
      fill: "#25101f" }),

    React.createElement("path", {
      d: "M62.772 32.942c-.656.554-1.073 1.332-1.24 2.17-.498 2.487-1.474 6.867-.595 9.506 1.145 3.432 3.932 5.866 8.435 5.01 0 0 5.397-.546 6.507-7.38 1.768-10.893-7.495-14.05-13.108-9.306",
      fill: "#f79467" }),

    React.createElement("path", {
      d: "M62.48 40.39c-.083.318-.408.508-.726.424-.317-.083-.507-.408-.423-.726.084-.317.41-.507.727-.424.317.084.507.41.424.727M67.506 40.49c-.084.32-.41.51-.726.425-.318-.083-.508-.408-.424-.726.083-.32.408-.508.726-.425.318.084.508.41.424.726M63.752 41.862l-.414 1.13-.12-.044.125.027-.004.03c0 .065.042.123.106.14l-.034.123.024-.125.64.118c.07.014.116.08.103.15-.014.07-.08.116-.15.103l-.64-.12h-.01c-.18-.05-.297-.21-.297-.387 0-.028.003-.057.01-.086l.004-.016.416-1.13c.024-.066.097-.1.164-.076.066.025.1.098.075.164M67.953 35.72s-1.843-.327-1.94.52c0 0-.054.576 1.558.825 1.613.25 2.257.21 2.456-.32.2-.527-1.2-.948-2.073-1.026M61.232 35.75s1.606-.35 1.837.46c0 0 .143.555-1.268.822-1.028.195-1.41.018-1.516-.354-.124-.44.34-.848.946-.93",
      fill: "#25101f" }),

    React.createElement("path", {
      d: "M62.744 44.302l4.56.052s-.094 1.97-2.205 1.97c-2.1 0-2.356-2.022-2.356-2.022",
      fill: "#190f0d" }),

    React.createElement("g", {
      "clip-path": "url(#a)",
      transform: "rotate(179.387 81.446 61.295) scale(.02863)" },

    React.createElement("path", {
      d: "M3332.91 2619.58c12.93-28.16 46.25-40.52 74.42-27.59 28.17 12.94 40.53 46.26 27.59 74.43-12.93 28.17-46.25 40.52-74.42 27.59-28.17-12.94-40.52-46.26-27.59-74.43",
      fill: "#e057b3" }),

    React.createElement("path", {
      d: "M3508.8 2713.02l-180.81.27v30.57l180.81 6.63v-37.47",
      fill: "#fff" })),


    React.createElement("path", {
      d: "M67.924 43.42h.036c1.743-.02 3.14-1.48 3.118-3.26-.015-1.335-.822-2.47-1.96-2.948h-.1c-.36 0-.834-.052-1.447-.147-.08-.012-.155-.025-.228-.04-1.48.28-2.593 1.616-2.575 3.208.02 1.77 1.43 3.188 3.157 3.188m-.994-3.675c.05 0 .1.007.152.02.318.084.508.41.424.726-.07.268-.31.445-.575.445-.05 0-.1-.006-.15-.02-.318-.083-.508-.408-.424-.726.07-.268.31-.445.574-.445",
      fill: "#f89e75" }),

    React.createElement("path", {
      d: "M66.93 40.935c.265 0 .506-.177.576-.444.084-.316-.106-.64-.424-.725-.05-.013-.102-.02-.152-.02-.263 0-.504.177-.574.444-.084.317.106.642.424.725.05.014.1.02.15.02M69.02 37.213h.098c-.37-.156-.773-.24-1.196-.24h-.036c-.186 0-.367.02-.544.053.073.014.15.027.23.04.612.094 1.085.147 1.447.147",
      fill: "#3c2537" }),

    React.createElement("path", {
      d: "M59.742 43.257c-.24-.547-.292-1.18-.105-1.795.183-.604.566-1.093 1.055-1.415.1-.952.253-1.903.414-2.78-.222-.07-.456-.105-.697-.105h-.03c-1.493.017-2.688 1.418-2.668 3.128.016 1.43.876 2.624 2.03 2.967",
      fill: "#f9b0ad" }),

    React.createElement("path", {
      d: "M60.424 43.356h.028c.07 0 .14-.005.21-.012-.127-1.012-.088-2.154.03-3.297-.49.322-.872.81-1.055 1.415-.187.616-.134 1.248.105 1.795.218.065.447.1.682.1",
      fill: "#f78e5f" }),

    React.createElement("path", {
      d: "M60.66 43.344c1.396-.138 2.48-1.486 2.46-3.116-.016-1.423-.868-2.612-2.014-2.962-.16.878-.315 1.83-.414 2.78-.118 1.144-.157 2.286-.03 3.298m1.243-3.7c.05 0 .1.007.152.02.317.084.507.41.424.727-.07.267-.31.444-.574.444-.05 0-.1-.006-.152-.02-.317-.083-.507-.408-.423-.726.07-.267.312-.443.575-.443",
      fill: "#f89e75" }),

    React.createElement("path", {
      d: "M61.906 40.834c.264 0 .504-.177.575-.443.084-.317-.106-.642-.423-.726-.05-.013-.102-.02-.152-.02-.263 0-.504.177-.574.444-.083.318.107.643.424.726.05.014.102.02.152.02",
      fill: "#3c2537" }),

    React.createElement("path", {
      d: "M64.767 40.233l.18-.002c.02 1.673 1.352 3.012 2.977 3.01h.034c1.628-.017 2.94-1.374 2.94-3.04v-.038c-.02-1.672-1.352-3.01-2.976-3.01h-.034c-1.628.018-2.94 1.375-2.94 3.042v.037l-.18.003-.18.002-.002-.04c0-1.86 1.466-3.382 3.298-3.404h.038c1.828 0 3.316 1.503 3.337 3.368v.04c0 1.86-1.466 3.382-3.298 3.404h-.038c-1.83 0-3.316-1.502-3.337-3.367l.18-.002M57.712 40.29l.18-.002c.01.808.303 1.533.763 2.053.462.522 1.085.836 1.77.836h.025c.684-.01 1.302-.33 1.756-.853.452-.524.735-1.25.735-2.053v-.04c-.01-.807-.302-1.532-.762-2.053-.462-.52-1.086-.834-1.77-.834h-.025c-.684.008-1.302.328-1.756.853-.452.523-.735 1.25-.735 2.053v.04-.002l-.18.002-.18.002v-.043c0-.89.31-1.698.822-2.29.51-.592 1.228-.97 2.025-.978h.03c.796 0 1.518.37 2.038.956.52.588.843 1.396.853 2.288l.002.044c0 .888-.312 1.696-.823 2.29-.512.59-1.23.967-2.026.976h-.03c-.797 0-1.52-.368-2.04-.956s-.842-1.395-.852-2.288l.18-.002",
      fill: "#483737" }),

    React.createElement("path", {
      d: "M64.632 40.353l.052-.046-.05.046h-.002l.052-.046-.05.046c-.003-.002-.075-.08-.194-.153-.12-.074-.284-.143-.478-.143-.2 0-.438.07-.725.31-.076.063-.19.053-.254-.023s-.055-.19.02-.254c.34-.286.672-.394.96-.394.29 0 .523.105.682.206.16.102.25.203.257.21.066.076.06.19-.015.256s-.19.06-.255-.015M71.143 39.992l2.82 1.072c.093.036.14.14.105.233-.036.093-.14.14-.233.104l-2.82-1.07c-.094-.037-.14-.14-.105-.234.035-.093.14-.14.233-.104",
      fill: "#483737" }),

    React.createElement("path", {
      d: "M75.224 40.507c-.428.18-8.293-4.553-4.303-9.704 0 0 5.983 1.405 5.64 9.7l-1.336.004",
      fill: "#a40" }),

    React.createElement("path", {
      d: "M70.28 32.697s-5.294-1.29-8.374 1.347c0 0 1.492-4.766 8.772-5.01l2.74 6.095-3.138-2.433M82.838 29.035c0 2.227-1.806 4.034-4.034 4.034-2.23 0-4.035-1.808-4.035-4.035 0-2.23 1.805-4.035 4.034-4.035 2.228 0 4.034 1.806 4.034 4.035M73.574 37.8l.514 5.437 1.876-4.978z",
      fill: "#a40" }),

    React.createElement("path", {
      d: "M79.747 43.78c-.505 1.668-2.266 2.61-3.933 2.104-1.667-.505-2.608-2.266-2.103-3.932.506-1.667 2.266-2.61 3.934-2.104 1.666.505 2.608 2.266 2.103 3.933",
      fill: "#f79467" }),

    React.createElement("path", {
      d: "M78.116 42.068l-.01-.003c-.05-.013-.29-.07-.61-.07-.35 0-.79.07-1.188.33-.397.264-.762.72-.96 1.53-.016.07-.085.11-.154.094-.068-.017-.11-.086-.094-.155.207-.86.613-1.384 1.067-1.683.455-.3.948-.373 1.33-.373.4 0 .682.08.69.082.067.02.107.09.087.158-.02.068-.09.107-.158.088",
      fill: "#25101f" }),

    React.createElement("path", {
      d: "M60.266 61.224s-4.506 2.67-4.506 9.61V90.73c0 2.47 1.793 4.576 4.232 4.972 3.05.493 5.82-1.85 5.84-4.938l.18-26.212-5.746-3.328",
      fill: "#d40055" }),

    React.createElement("path", {
      d: "M62.975 101.138l-4.213-.014-1-6.357c2.112 1.552 6.025.83 7.062-1.578.862-2.003-.144-3.813-2.104-4.764l.255 12.712",
      fill: "#f79467" }),

    React.createElement("path", {
      d: "M79.883 58.31s8.232 1.79 11.384 9.456c3.153 7.666.964 34.012.964 34.012s-15.588 7.66-29.255-.64l-2.71-39.914s3.057-2.197 5.55-3.608l14.068.695",
     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0