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