react实现卡片触摸更换效果-html代码-BFW代码库

代码语言：html
所属分类：幻灯片
代码描述：react实现卡片触摸更换效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css2?family=Muli&family=Sedgwick+Ave&display=swap");

body {
  margin: 0;
}

.App {
  align-items: center;
  background-color: #e0c5c0;
  display: flex;
  justify-content: center;
  height: 100vh;
}

.container {
  background-color: #fff;
  border-radius: 16px;
  height: 464px;
  overflow: hidden;
  position: relative;
  width: 256px;
}

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

.title1 {
  font-family: "Sedgwick Ave";
  height: 27px;
  overflow: hidden;
}

.titleList {
  list-style: none;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

.titleItem {
  height: 30px;
}

.title2 {
  font-family: "Muli";
}

.title3 {
  color: #999;
  font-family: "Muli";
  font-size: 12px;
}

.blob {
  position: absolute;
}

.person {
  position: absolute;
  transform-origin: 50% 1000px;
}

.person1 {
  transform: rotate(0);
}

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

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

.text {
  bottom: 40px;
  font-family: "Muli";
  font-size: 10px;
  line-height: 20px;
  padding: 24px;
  position: absolute;
  text-align: center;
}

.navDots {
  bottom: 32px;
  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;
}

.p1-fil5 {
  fill: #2a2d40;
}

.p1-fil7 {
  fill: #2e2d2d;
}

.p1-fil4 {
  fill: #ee4239;
}

.p1-fil22 {
  fill: #212123;
  fill-rule: nonzero;
}

.p1-fil20 {
  fill: #222225;
  fill-rule: nonzero;
}

.p1-fil26 {
  fill: #28282a;
  fill-rule: nonzero;
}

.p1-fil3 {
  fill: #2a2d40;
  fill-rule: nonzero;
}

.p1-fil15 {
  fill: #2e2f30;
  fill-rule: nonzero;
}

.p1-fil13 {
  fill: #303b50;
  fill-rule: nonzero;
}

.p1-fil18 {
  fill: #34395f;
  fill-rule: nonzero;
}

.p1-fil6 {
  fill: #353d65;
  fill-rule: nonzero;
}

.p1-fil12 {
  fill: #435361;
  fill-rule: nonzero;
}

.p1-fil39 {
  fill: #546eb0;
  fill-rule: nonzero;
}

.p1-fil10 {
  fill: #6e88a4;
  fill-rule: nonzero;
}

.p1-fil37 {
  fill: #7a8cc5;
  fill-rule: nonzero;
}

.p1-fil11 {
  fill: #807e80;
  fill-rule: nonzero;
}

.p1-fil29 {
  fill: #897d7d;
  fill-rule: nonzero;
}

.p1-fil27 {
  fill: #9a5245;
  fill-rule: nonzero;
}

.p1-fil24 {
  fill: #a0683d;
  fill-rule: nonzero;
}

.p1-fil21 {
  fill: #b8d4e3;
  fill-rule: nonzero;
}

.p1-fil31 {
  fill: #ba3a4b;
  fill-rule: nonzero;
}

.p1-fil35 {
  fill: #c13538;
  fill-rule: nonzero;
}

.p1-fil25 {
  fill: #c77560;
  fill-rule: nonzero;
}

.p1-fil33 {
  fill: #d64456;
  fill-rule: nonzero;
}

.p1-fil28 {
  fill: #db7f7c;
  fill-rule: nonzero;
}

.p1-fil0 {
  fill: #e0c5c0;
  fill-rule: nonzero;
}

.p1-fil9 {
  fill: #e56f68;
  fill-rule: nonzero;
}

.p1-fil32 {
  fill: #e65261;
  fill-rule: nonzero;
}

.p1-fil19 {
  fill: #e76e41;
  fill-rule: nonzero;
}

.p1-fil14 {
  fill: #ebadab;
  fill-rule: nonzero;
}

.p1-fil23 {
  fill: #ed9897;
  fill-rule: nonzero;
}

.p1-fil34 {
  fill: #ee4239;
  fill-rule: nonzero;
}

.p1-fil16 {
  fill: #ef8e8a;
  fill-rule: nonzero;
}

.p1-fil38 {
  fill: #f09b97;
  fill-rule: nonzero;
}

.p1-fil36 {
  fill: #f29d99;
  fill-rule: nonzero;
}

.p1-fil17 {
  fill: #f5a656;
  fill-rule: nonzero;
}

.p1-fil30 {
  fill: #f69773;
  fill-rule: nonzero;
}

.p1-fil2 {
  fill: #f7d7d8;
  fill-rule: nonzero;
}

.p1-fil8 {
  fill: #fdeae7;
  fill-rule: nonzero;
}

.p1-fil1 {
  fill: #fefefe;
  fill-rule: nonzero;
}

.p2-fil5 {
  fill: #2a2d40;
}
.p2-fil7 {
  fill: #2e2d2d;
}
.p2-fil4 {
  fill: #ee4239;
}
.p2-fil22 {
  fill: #212123;
  fill-rule: nonzero;
}
.p2-fil20 {
  fill: #222225;
  fill-rule: nonzero;
}
.p2-fil26 {
  fill: #28282a;
  fill-rule: nonzero;
}
.p2-fil3 {
  fill: #2a2d40;
  fill-rule: nonzero;
}
.p2-fil15 {
  fill: #2e2f30;
  fill-rule: nonzero;
}
.p2-fil13 {
  fill: #303b50;
  fill-rule: nonzero;
}
.p2-fil18 {
  fill: #34395f;
  fill-rule: nonzero;
}
.p2-fil6 {
  fill: #353d65;
  fill-rule: nonzero;
}
.p2-fil12 {
  fill: #435361;
  fill-rule: nonzero;
}
.p2-fil39 {
  fill: #546eb0;
  fill-rule: nonzero;
}
.p2-fil10 {
  fill: #6e88a4;
  fill-rule: nonzero;
}
.p2-fil37 {
  fill: #7a8cc5;
  fill-rule: nonzero;
}
.p2-fil11 {
  fill: #807e80;
  fill-rule: nonzero;
}
.p2-fil29 {
  fill: #897d7d;
  fill-rule: nonzero;
}
.p2-fil27 {
  fill: #9a5245;
  fill-rule: nonzero;
}
.p2-fil24 {
  fill: #a0683d;
  fill-rule: nonzero;
}
.p2-fil21 {
  fill: #b8d4e3;
  fill-rule: nonzero;
}
.p2-fil31 {
  fill: #ba3a4b;
  fill-rule: nonzero;
}
.p2-fil35 {
  fill: #c13538;
  fill-rule: nonzero;
}
.p2-fil25 {
  fill: #c77560;
  fill-rule: nonzero;
}
.p2-fil33 {
  fill: #d64456;
  fill-rule: nonzero;
}
.p2-fil28 {
  fill: #db7f7c;
  fill-rule: nonzero;
}
.p2-fil0 {
  fill: #e0c5c0;
  fill-rule: nonzero;
}
.p2-fil9 {
  fill: #e56f68;
  fill-rule: nonzero;
}
.p2-fil32 {
  fill: #e65261;
  fill-rule: nonzero;
}
.p2-fil19 {
  fill: #e76e41;
  fill-rule: nonzero;
}
.p2-fil14 {
  fill: #ebadab;
  fill-rule: nonzero;
}
.p2-fil23 {
  fill: #ed9897;
  fill-rule: nonzero;
}
.p2-fil34 {
  fill: #ee4239;
  fill-rule: nonzero;
}
.p2-fil16 {
  fill: #ef8e8a;
  fill-rule: nonzero;
}
.p2-fil38 {
  fill: #f09b97;
  fill-rule: nonzero;
}
.p2-fil36 {
  fill: #f29d99;
  fill-rule: nonzero;
}
.p2-fil17 {
  fill: #f5a656;
  fill-rule: nonzero;
}
.p2-fil30 {
  fill: #f69773;
  fill-rule: nonzero;
}
.p2-fil2 {
  fill: #f7d7d8;
  fill-rule: nonzero;
}
.p2-fil8 {
  fill: #fdeae7;
  fill-rule: nonzero;
}
.p2-fil1 {
  fill: #fefefe;
  fill-rule: nonzero;
}

.p3-fil5 {
  fill: #2a2d40;
}
.p3-fil7 {
  fill: #2e2d2d;
}
.p3-fil4 {
  fill: #ee4239;
}
.p3-fil22 {
  fill: #212123;
  fill-rule: nonzero;
}
.p3-fil20 {
  fill: #222225;
  fill-rule: nonzero;
}
.p3-fil26 {
  fill: #28282a;
  fill-rule: nonzero;
}
.p3-fil3 {
  fill: #2a2d40;
  fill-rule: nonzero;
}
.p3-fil15 {
  fill: #2e2f30;
  fill-rule: nonzero;
}
.p3-fil13 {
  fill: #303b50;
  fill-rule: nonzero;
}
.p3-fil18 {
  fill: #34395f;
  fill-rule: nonzero;
}
.p3-fil6 {
  fill: #353d65;
  fill-rule: nonzero;
}
.p3-fil12 {
  fill: #435361;
  fill-rule: nonzero;
}
.p3-fil39 {
  fill: #546eb0;
  fill-rule: nonzero;
}
.p3-fil10 {
  fill: #6e88a4;
  fill-rule: nonzero;
}
.p3-fil37 {
  fill: #7a8cc5;
  fill-rule: nonzero;
}
.p3-fil11 {
  fill: #807e80;
  fill-rule: nonzero;
}
.p3-fil29 {
  fill: #897d7d;
  fill-rule: nonzero;
}
.p3-fil27 {
  fill: #9a5245;
  fill-rule: nonzero;
}
.p3-fil24 {
  fill: #a0683d;
  fill-rule: nonzero;
}
.p3-fil21 {
  fill: #b8d4e3;
  fill-rule: nonzero;
}
.p3-fil31 {
  fill: #ba3a4b;
  fill-rule: nonzero;
}
.p3-fil35 {
  fill: #c13538;
  fill-rule: nonzero;
}
.p3-fil25 {
  fill: #c77560;
  fill-rule: nonzero;
}
.p3-fil33 {
  fill: #d64456;
  fill-rule: nonzero;
}
.p3-fil28 {
  fill: #db7f7c;
  fill-rule: nonzero;
}
.p3-fil0 {
  fill: #e0c5c0;
  fill-rule: nonzero;
}
.p3-fil9 {
  fill: #e56f68;
  fill-rule: nonzero;
}
.p3-fil32 {
  fill: #e65261;
  fill-rule: nonzero;
}
.p3-fil19 {
  fill: #e76e41;
  fill-rule: nonzero;
}
.p3-fil14 {
  fill: #ebadab;
  fill-rule: nonzero;
}
.p3-fil23 {
  fill: #ed9897;
  fill-rule: nonzero;
}
.p3-fil34 {
  fill: #ee4239;
  fill-rule: nonzero;
}
.p3-fil16 {
  fill: #ef8e8a;
  fill-rule: nonzero;
}
.p3-fil38 {
  fill: #f09b97;
  fill-rule: nonzero;
}
.p3-fil36 {
  fill: #f29d99;
  fill-rule: nonzero;
}
.p3-fil17 {
  fill: #f5a656;
  fill-rule: nonzero;
}
.p3-fil30 {
  fill: #f69773;
  fill-rule: nonzero;
}
.p3-fil2 {
  fill: #f7d7d8;
  fill-rule: nonzero;
}
.p3-fil8 {
  fill: #fdeae7;
  fill-rule: nonzero;
}
.p3-fil1 {
  fill: #fefefe;
  fill-rule: nonzero;
}
</style>

</head>
<body translate="no">
<div id="root"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-spring-web.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-use-gesture.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", {
      xmlns: "http://www.w3.org/2000/svg",
      width: "256",
      height: "464",
      fillRule: "evenodd",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision",
      version: "1.1",
      viewBox: "0 0 256 464",
      xmlSpace: "preserve" },

    React.createElement("defs", null,
    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M1515 6513H223V5277h533v429c0 74 60 134 134 134h625z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M3334 6513h-722v-673h722z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M2612 6513H1515v-673h83v673z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M2612 6513H1598v-673h1014z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M4626 6513H3334h625v-676c8 2 18 3 27 3h640z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M3959 6513h-56v-701c16 13 35 21 56 26v676z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M3904 6513h-570v-673h10c103 0 88-65 88-188v-375h420v429c0 43 20 81 52 106z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M3344 5840h-10v-563h98v375c0 123 15 188-88 188z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M6445 6513h-722v-673h722z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M5723 6513H4626v-673h83v673z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M5723 6513H4709v-673h1014z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M7820 5277h2305v1236h56V5277h-56z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M7737 6513H6446h624V5277h750-84v1236z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M7070 6513h-56V5277h56z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M7015 6513h-570v-673c72-3 129-62 129-134v-429h441z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M6445 5840v-563h129v429c0 72-57 131-129 134z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M10126 6513H8834V5277h1292z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M8834 6513H7737V5277h83v1236z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M8834 6513H7820V5277h1014z" }))),


    React.createElement("g", { display: "inline" },
    React.createElement("path", {
      fillRule: "evenodd",
      d: "M2685 4226L2573 4035 2471 4109 2589 4293z",
      className: "p1-fil9",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision",
      transform: "matrix(.096 0 0 .096 -73 -95.969)" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M174.384 313.938l-11.136 17.183c-.672 1.152-.48 2.688.48 3.648l27.648-17.663-7.392-9.408z",
      className: "p1-fil0",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M150.097 203.061l5.184 40.223 32.543 55.966-26.976 14.496-26.303-52.318c-1.92-3.264-3.264-6.72-4.224-10.368l-6.047-23.903 25.823-24.192z",
      className: "p1-fil10",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M132.53 257.492l-.193-.672.288.576v.096zm-2.017-5.856l-6.815-19.776 1.536-.863 5.183 20.159c0 .192.096.384.096.576z",
      className: "p1-fil11",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M132.53 257.396l-.289-.576-1.824-5.184c-.096-.192-.096-.384-.096-.576l-5.183-20.16 24.67-14.687-17.375 41.183z",
      className: "p1-fil12",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      d: "M1925 4446L1969 4212 1844 4219 1808 4451z",
      className: "p1-fil9",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision",
      transform: "matrix(.096 0 0 .096 -73 -95.969)" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M100.85 328.817l-18.623 8.544c-1.248.576-1.824 2.016-1.536 3.264h32.735l-1.248-11.904-11.424.096z",
      className: "p1-fil0",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M145.969 191.926l-28.895-6.624c0 6.24-12.192 47.71-16.8 59.998a50.943 50.943 0 00-2.783 11.424l-5.952 65.662 30.815.384 4.704-64.03 15.071-33.695c10.464-19.296 3.84-33.023 3.84-33.023z",
      className: "p1-fil10",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M122.834 132.984l19.871-.384s.576-24.864-13.055-25.248c-11.904-.288-13.152 15.456-13.152 15.456l6.432 10.176z",
      className: "p1-fil13",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M130.993 109.56c.768.288 1.44.672 2.112 1.152 5.856 4.608 3.552 14.976-.864 19.968-2.4 2.784-6.143 4.32-9.695 3.36-5.184-1.344-7.296-6.816-6.72-11.904.384-3.84 2.112-7.488 4.896-10.08 2.784-2.496 6.816-3.84 10.271-2.592z",
      className: "p1-fil14",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M133.681 127.512c1.056.864 2.688 1.056 3.936.48 1.248-.576 2.112-1.824 2.304-3.264.192-1.248-.288-2.592-1.248-3.264-.96-.672-2.592-.48-3.264.576l-1.632 5.472z",
      className: "p1-fil14",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M134.737 124.056l.864 17.76a6.22 6.22 0 01-5.472 6.527c-3.743.48-7.007-2.496-6.911-6.336l.288-16.607z",
      className: "p1-fil14",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M123.218 136.632v-2.4s4.992.96 8.927-3.552c0 0-2.016 4.896-8.927 5.952z",
      className: "p1-fil15",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M136.081 125.592c.384 0 .768-.096 1.152-.384.288-.192.48-.576.48-.96 0-.576-.48-1.056-.96-1.248-.096 0-.288 0-.384.192 0 .096 0 .288.192.384.384.096.672.384.672.672a.528.528 0 01-.288.48c-.192.192-.48.288-.768.288-.192 0-.288.096-.288.288 0 .192.096.288.288.288z",
      className: "p1-fil15",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M125.042 124.824c.096.576.864.96 1.824.864.96-.096 1.632-.672 1.536-1.344-.096-.576-.864-.96-1.824-.864-.96.096-1.632.672-1.536 1.344z",
      className: "p1-fil16",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M120.626 125.592l-1.056-.768-.192-.384.288-.096c.096 0 .288-.192.48-.384s.288-.384.48-.48l.864-1.152c-.192.48-.384.864-.576 1.344a5.5 5.5 0 01-.384.672c-.192.192-.288.384-.576.576l.096-.48.768 1.056v.096h-.096z",
      className: "p1-fil15",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M119.474 127.224c.384.192.768.384 1.152.48.384.096.768 0 1.152-.096.384-.096.672-.384.96-.672l.864-.96c-.096.192-.192.384-.192.672-.096.192-.192.384-.384.576a3 3 0 01-1.056.864c-.48.192-.96.192-1.44 0s-.768-.48-1.056-.864z",
      className: "p1-fil15",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M118.034 123.864c0 .576-.768 1.056-1.632 1.056-.192 0-.384 0-.576-.096a7.767 7.767 0 010-2.112c.192 0 .384-.096.576-.096.96 0 1.632.48 1.632 1.056z",
      className: "p1-fil16",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M124.274 120.408c0 .576 0 1.152.096 1.632.096.576.48.864.864.768.48 0 .768-.48 1.056-.96.192-.48.384-1.056.48-1.632l.192-.096.096.192c0 .576-.192 1.152-.384 1.728-.288.576-.672 1.152-1.44 1.248-.384 0-.768-.096-1.056-.288-.288-.288-.384-.576-.384-.864-.096-.576-.096-1.248.096-1.824l.192-.096.096.192z",
      className: "p1-fil15",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M117.074 119.928c0 .48 0 .96.096 1.344.096.48.288.768.672.672.288 0 .576-.384.768-.768.192-.384.288-.864.384-1.344l.192-.096.096.192c0 .48-.096.96-.288 1.44-.192.48-.48 1.056-1.152 1.152-.288 0-.672-.096-.864-.384-.192-.288-.288-.48-.288-.768-.096-.48 0-1.056.096-1.536l.192-.096z",
      className: "p1-fil15",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M129.842 118.776s.48-8.16 4.991-7.392c0 0-1.728-3.648-6.623-3.84-3.648-.192-7.008 1.728-9.12 4.608-1.152 1.536-2.688 4.32-3.264 6.336 1.728 0 14.016.288 14.016.288z",
      className: "p1-fil13",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M133.585 110.616s-3.456 1.44-1.824 7.584c1.728 6.144 5.376 2.304 5.376 2.304s1.152-9.984-3.552-9.888z",
      className: "p1-fil13",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M90.867 135.384l-.96 4.991s-18.432 44.255-9.216 46.079c7.488 1.536 25.247-11.424 25.247-11.424l-6.432-10.943-10.463 7.583s5.952-25.439 7.104-28.03c0 0 3.935-2.017 4.511-3.745.192-.672.192-1.824-2.111.288-1.056.96-3.168-.288-2.208-1.92.96-1.631 3.551-1.727 4.415.48 0 0 .864.384 1.248-.288.384-.672-1.152-3.167-3.072-3.167-1.247 0-2.303.48-2.303.48s2.303-5.856 1.824-6.048c-.48-.192-1.248-.096-3.744 6.336 0 0 1.44-5.184 1.536-5.952.096-.672-.672-1.44-1.248.192-.096.192-2.016 5.184-2.016 5.184s.48-3.552.48-3.84c.096-.768-.672-.864-1.056 0-.288.672-1.44 3.648-1.44 3.648z",
      className: "p1-fil14",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M151.249 165.815s.672-17.856-15.552-28.703c0 0-7.391 2.88-12.863 2.303-3.84 9.696-6.528 17.088-12.096 58.175 0 0 11.52-.48 18.912.096 10.943.768 21.887-3.936 21.887-3.936l-.288-27.84z",
      className: "p1-fil17",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M122.834 139.415L99.41 162.743s1.824 15.263 5.952 16.895l17.088-8.928.384-31.199z",
      className: "p1-fil17",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M104.402 195.67l-8.255 1.152c-1.344.192-2.688-.768-2.88-2.208l-2.4-17.184c-.192-1.344.768-2.688 2.112-2.88l8.255-1.152c1.344-.192 2.688.768 2.88 2.208l2.4 17.184c.192 1.344-.768 2.688-2.112 2.88z",
      className: "p1-fil18",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M162.768 179.446l-39.55 1.152v39.935s-.864 6.72 8.447 6.432c9.216-.288 24.096-1.44 24.096-1.44s5.568-2.496 6.72-8.736c1.151-6.144.287-37.439.287-37.439z",
      className: "p1-fil19",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M155.185 182.134s-5.376-44.638-19.104-43.487c-13.727 1.152-7.295 47.999-7.295 47.999l4.607.288s-8.351-47.999 4.032-47.71c12.384.287 14.016 47.998 14.016 47.998z",
      className: "p1-fil19",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M134.833 186.934c-1.44-2.4-2.88-4.8-4.224-7.2-3.743 1.056-7.2 1.92-10.08 2.496-2.591.48-4.991.96-6.815 1.344l-1.728.288c-1.056.192-1.728.288-1.728.288s-5.664-.768-6.912-2.784c-.288.096-.672.576-.576 1.056.384 1.728 2.112 2.688 2.112 2.688s-8.255 1.728-7.871 2.4c.48.672 6.143-.192 6.143-.192s-7.871 1.824-7.2 2.4c.289.192.673.096 6.528-.192 0 0-5.567 1.824-4.607 2.016 1.247.384 5.087-.384 5.087-.384s-3.84 1.44-3.072 1.632c.768.192 11.328-2.112 11.328-2.112s24-3.072 23.711-3.744z",
      className: "p1-fil14",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M159.793 167.063c-9.696 5.183-9.024 4.991-16.896 7.583 0 0-6.624-13.727-10.848-22.847-1.248-2.688-.672-5.856 1.344-7.968 3.264-3.456 8.64-2.496 11.328 1.536 3.936 6.048 15.168 21.696 15.168 21.696z",
      className: "p1-fil17",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M143.857 174.358l-6.432-12.767c-.096-.192-.288-.192-.384-.096-.192.096-.192.288-.096.384l6.432 12.767c.096.192.288.192.384.096.192-.096.192-.288.096-.384z",
      className: "p1-fil20",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M159.313 167.35c-3.552 1.825-6.528 3.648-9.024 4.704v.096a117.894 117.894 0 01-19.776 7.68c.576 2.4 1.152 5.472 1.728 7.872 24.768-3.456 29.951-11.904 30.143-13.056.48-.864-.864-3.744-3.071-7.2z",
      className: "p1-fil14",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }))));




}

function P2() {
  return (
    React.createElement("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      width: "256",
      height: "464",
      fillRule: "evenodd",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision",
      version: "1.1",
      viewBox: "0 0 256 464",
      xmlSpace: "preserve" },

    React.createElement("defs", null,
    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M1515 6513H223V5277h533v429c0 74 60 134 134 134h625z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M3334 6513h-722v-673h722z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M2612 6513H1515v-673h83v673z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M2612 6513H1598v-673h1014z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M4626 6513H3334h625v-676c8 2 18 3 27 3h640z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M3959 6513h-56v-701c16 13 35 21 56 26v676z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M3904 6513h-570v-673h10c103 0 88-65 88-188v-375h420v429c0 43 20 81 52 106z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M3344 5840h-10v-563h98v375c0 123 15 188-88 188z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M6445 6513h-722v-673h722z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M5723 6513H4626v-673h83v673z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M5723 6513H4709v-673h1014z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M7820 5277h2305v1236h56V5277h-56z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M7737 6513H6446h624V5277h750-84v1236z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M7070 6513h-56V5277h56z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M7015 6513h-570v-673c72-3 129-62 129-134v-429h441z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M6445 5840v-563h129v429c0 72-57 131-129 134z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M10126 6513H8834V5277h1292z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M8834 6513H7737V5277h83v1236z" })),

    React.createElement("clipPath", { clipRule: "nonzero" },
    React.createElement("path", { d: "M8834 6513H7820V5277h1014z" }))),


    React.createElement("g", { display: "inline" },
    React.createElement("path", {
      fillRule: "evenodd",
      d: "M5164 4197L5039 4204 5067 4451 5184 4446z",
      className: "p2-fil21",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision",
      transform: "matrix(.096 0 0 .096 -369.781 -95.97)" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M116.925 328.818L98.3 337.362c-1.248.576-1.824 2.016-1.536 3.264H129.5l-1.248-11.904-11.423.096z",
      className: "p2-fil22",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      d: "M5399 4197L5274 4204 5302 4451 5419 4446z",
      className: "p2-fil21",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision",
      transform: "matrix(.096 0 0 .096 -369.781 -95.97)" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M139.484 328.818l-18.624 8.544c-1.247.576-1.823 2.016-1.535 3.264h32.735l-1.248-11.904-11.424.096z",
      className: "p2-fil22",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      d: "M5378 3228L4958 3238 5024 4371 5451 4371z",
      className: "p2-fil23",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision",
      transform: "matrix(.096 0 0 .096 -369.781 -95.97)" }),

    React.createElement("path", {
      fillRule: "evenodd",
      d: "M5078 3236L5077 3238 5154 3434 5216 4372 5218 4373 5219 4371 5157 3433 5080 3237z",
      className: "p2-fil24",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision",
      transform: "matrix(.096 0 0 .096 -369.781 -95.97)" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M128.348 116.473a9.07 9.07 0 00-2.304 1.248c-6.431 4.991-3.84 16.223.864 21.695 2.592 2.976 6.72 4.704 10.56 3.744 5.568-1.44 7.872-7.392 7.392-12.96-.384-4.128-2.208-8.16-5.376-10.944-3.072-2.687-7.488-4.223-11.232-2.783z",
      className: "p2-fil25",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M124.316 132.216l-.864 19.296c-.192 3.551 2.4 6.72 5.952 7.103a6.787 6.787 0 007.584-6.911l-.384-18.048-12.288-1.536z",
      className: "p2-fil25",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M136.796 145.944v-2.688s-5.472 1.056-9.792-3.84c0 0 2.208 5.28 9.792 6.528z",
      className: "p2-fil26",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M134.396 131.256h-.096c-.288-.288-.864.192-.48.48.576.576 1.632-.192.96-.864-.576-.576-1.632.288-1.056.96.576.672 1.632-.384.864-.864-.768-.576-1.344.672-.48 1.056.384.192.672-.48.192-.672z",
      className: "p2-fil13",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M135.932 128.184c-1.44-.096-2.88 0-4.32.192-.672.096-.48 1.056.192.96 1.344-.192 2.688-.288 4.128-.192.672 0 .672-.96.096-.96z",
      className: "p2-fil13",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M143.612 129.624c-.288-.288-.864.192-.48.48.576.576 1.632-.192.96-.864-.576-.576-1.632.288-1.056.96.576.672 1.632-.384.864-.864-.768-.576-1.344.672-.48 1.056.384.192.672-.48.192-.672z",
      className: "p2-fil13",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M140.06 127.416c1.152-.48 2.496-.768 3.744-.96.576-.096.768.864.192.96-1.248.192-2.4.48-3.552.96-.576.192-.96-.672-.384-.864z",
      className: "p2-fil13",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M126.908 120.984c1.92-.672 7.392-1.92 14.592.384l-.864-8.735s-12.48-1.44-22.271 4.224l2.112 12.095s1.055.576 2.207.288c.48.48 1.056.672 1.824.384 1.248-.384 1.536-1.728 1.728-2.88.192-1.92.48-3.84.672-5.664z",
      className: "p2-fil13",
      clipRule: "evenodd",
      imageRendering: "optimizeQuality",
      opacity: "1",
      shapeRendering: "geometricPrecision",
      textRendering: "geometricPrecision" }),

    React.createElement("path", {
      fillRule: "evenodd",
      strokeWidth: "0.096",
      d: "M122.684 130.008c2.112.096 3.84.48 4.224-1.344.384-1.632.288-9.216 3.936-7.584 2.688 1.152 4.704 1.056 8.16.096 1.44-.384 2.592.384 2.592.192 0 0-2.88-8.16-11.52-7.487-2.688.192-4.896 2.112-6.048 4.608-1.44 3.071-1.536 6.815-1.44 10.08l.096 1.535z",
      className: .........完整代码请登录后点击上方下载按钮下载查看