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