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