gsap+tailwind实现商品切换卡片效果代码-html代码-BFW代码库

代码语言：html

所属分类：电商

代码描述：gsap+tailwind实现商品切换卡片效果代码，底部还有电商购物车里的商品。

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

body {
  font-family: "Inter", serif;
}

.card {
  top: 140px;
  left: 27px;
  width: 248px;
  height: 306px;
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

.item-content {
  background: #ffffff;
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.15);
  padding-top: 140px;
}

.vertical-text {
  writing-mode: vertical-rl;
  rotate: 180deg;
}

.cart1 {
  background-image: url("//repo.bfw.wiki/bfwrepo/image/60dd75384c21a.png");
}
.cart2 {
  background-image: url("//repo.bfw.wiki/bfwrepo/image/60dd752ac3e0a.png");
}

.bg-page {
  background: #a7eef7;
  min-height:672px;
}
.bg-screen {
  background-color: #fbe668;
}

.main-bg {
  background-color: #515151;
}
.main-txt {
  color: #515151;
}


.delivered {
  color: #55c7ff;
}

.supplier {
  color: #b0b0b0;
}

.floating-image {
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.18);
}

.cart-item-inner {
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25);
}
.cart-item-outer {
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}
</style>


  
  
</head>

<body translate="no">
  <div class="h-screen w-screen grid place-items-center bg-page">
      <div class="bg-screen w-[360px] h-[640px] overflow-hidden">
      <div class="h-16 w-16 bg-[#fe5a49] grid place-items-center">
        <svg
          class="w-12 h-12"
          viewBox="0 0 122 122"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M68.6875 50.1875C64.7292 50.1042 61.1042 50.5417 57.8125 51.5C54.5625 52.4167 51.7708 53.9583 49.4375 56.125C47.1458 58.25 45.3542 61.0208 44.0625 64.4375C42.8125 67.8125 42.1875 71.8958 42.1875 76.6875C42.1875 78.5625 42.2917 80.4792 42.5 82.4375C42.7083 84.3958 43.0625 86.2917 43.5625 88.125C44.1042 89.9167 44.7917 91.625 45.625 93.25C46.4583 94.875 47.5 96.2917 48.75 97.5C50 98.6667 51.4583 99.6042 53.125 100.312C54.7917 101.021 56.7292 101.375 58.9375 101.375C61.5625 101.375 63.8333 100.729 65.75 99.4375C67.7083 98.1458 69.3125 96.5 70.5625 94.5C71.8125 92.4583 72.75 90.2083 73.375 87.75C74 85.25 74.3125 82.8333 74.3125 80.5C74.3125 78.7083 74.0833 77.0833 73.625 75.625C73.2083 74.1667 72.5833 72.9167 71.75 71.875C70.9583 70.7917 69.9792 69.9583 68.8125 69.375C67.6458 68.7917 66.3542 68.5 64.9375 68.5C63.3958 68.5 62.0208 68.8125 60.8125 69.4375C59.6458 70.0208 59.0625 70.7708 59.0625 71.6875C59.0625 72.3125 59.375 72.75 60 73C60.6667 73.2083 61.375 73.5 62.125 73.875C62.9167 74.2083 63.625 74.7083 64.25 75.375C64.9167 76.0417 65.25 77.0833 65.25 78.5C65.25 80.1667 64.6875 81.4792 63.5625 82.4375C62.4792 83.3958 61.0625 83.875 59.3125 83.875C58.2292 83.875 57.2708 83.6458 56.4375 83.1875C55.6458 82.6875 54.9583 82.0625 54.375 81.3125C53.8333 80.5208 53.4167 79.6458 53.125 78.6875C52.8333 77.6875 52.6875 76.6875 52.6875 75.6875C52.6875 73.1458 53.3125 71.0833 54.5625 69.5C55.8125 67.875 57.4375 66.5833 59.4375 65.625C61.4792 64.6667 63.7917 63.9583 66.375 63.5C69 63 71.6667 62.5625 74.375 62.1875C77.0833 61.8125 79.7292 61.4167 82.3125 61C84.9375 60.5833 87.25 59.9583 89.25 59.125C91.2917 58.2917 92.9375 57.1875 94.1875 55.8125C95.4375 54.4375 96.0625 52.6042 96.0625 50.3125C96.0625 49.0208 95.8125 48.0625 95.3125 47.4375C94.8542 46.8125 94.3333 46.375 93.75 46.125C93.0417 45.8333 92.2708 45.7292 91.4375 45.8125C90.8125 45.8125 90.2708 45.8958 89.8125 46.0625C89.3542 46.1875 88.9167 46.3542 88.5 46.5625C88.125 46.7292 87.7292 46.8958 87.3125 47.0625C86.8958 47.1875 86.4375 47.25 85.9375 47.25C84.9375 47.25 84 46.8542 83.125 46.0625C82.2917 45.2292 81.875 43.9167 81.875 42.125C81.875 40.4583 82.1875 39.0417 82.8125 37.875C83.4375 36.7083 84.2292 35.75 85.1875 35C86.1458 34.25 87.1875 33.7083 88.3125 33.375C89.4792 33 90.6042 32.8125 91.6875 32.8125C93.8125 32.8125 95.6667 33.1875 97.25 33.9375C98.875 34.6458 100.229 35.6042 101.312 36.8125C102.438 37.9792 103.271 39.3125 103.812 40.8125C104.354 42.2708 104.625 43.7292 104.625 45.1875C104.625 48.1458 104.229 50.75 103.438 53C102.646 55.2083 101.5 57.125 100 58.75C98.5 60.375 96.6458 61.7292 94.4375 62.8125C92.2708 63.8542 89.7917 64.6875 87 65.3125C88.2917 66.7708 89.2917 68.6042 90 70.8125C90.7083 72.9792 91.0625 75.5833 91.0625 78.625C91.0625 82 90.3125 85.3958 88.8125 88.8125C87.3125 92.1875 85.0625 95.2292 82.0625 97.9375C79.0625 100.604 75.3125 102.792 70.8125 104.5C66.3542 106.167 61.1667 107 55.25 107C50.25 107 45.6458 106.333 41.4375 105C37.2292 103.625 33.6042 101.646 30.5625 99.0625C27.5625 96.4375 25.2083 93.25 23.5 89.5C21.7917 85.75 20.9375 81.4792 20.9375 76.6875C20.9375 73.3125 21.3958 70.25 22.3125 67.5C23.2292 64.75 24.4375 62.3125 25.9375 60.1875C27.4792 58.0625 29.2083 56.2083 31.125 54.625C33.0833 53.0417 35.0625 51.7083 37.0625 50.625C39.0625 49.5417 41.0208 48.7083 42.9375 48.125C44.8542 47.5 46.5625 47.0833 48.0625 46.875C47.4792 46.7083 46.7083 46.4583 45.75 46.125C44.8333 45.75 43.8333 45.2708 42.75 44.6875C41.7083 44.0625 40.6458 43.3333 39.5625 42.5C38.4792 41.625 37.5 40.6042 36.625 39.4375C35.7917 38.2708 35.1042 36.9375 34.5625 35.4375C34.0208 33.8958 33.75 32.1667 33.75 30.25C33.75 27.5 34.3542 25.0417 35.5625 22.875C36.7708 20.6667 38.4375 18.8125 40.5625 17.3125C42.6875 15.7708 45.1667 14.6042 48 13.8125C50.875 12.9792 53.9375 12.5625 57.1875 12.5625C60.9375 12.5625 64.1667 12.875 66.875 13.5C69.5833 14.0833 71.8125 14.9167 73.5625 16C75.3542 17.0417 76.6667 18.2708 77.5 19.6875C78.375 21.1042 78.8125 22.6042 78.8125 24.1875C78.8125 24.9375 78.6875 25.7083 78.4375 26.5C78.2292 27.2917 77.875 28.0208 77.375 28.6875C76.875 29.3542 76.2292 29.9167 75.4375 30.375C74.6875 30.7917 73.7917 31 72.75 31C71.5417 31 70.6458 30.6667 70.0625 30C69.5208 29.3333 69.125 28.5 68.875 27.5C68.625 26.5 68.4167 25.4375 68.25 24.3125C68.125 23.1458 67.875 22.0625 67.5 21.0625C67.125 20.0625 66.5 19.2292 65.625 18.5625C64.7917 17.8958 63.5417 17.5625 61.875 17.5625C60.5833 17.5625 59.3542 17.9167 58.1875 18.625C57.0208 19.3333 55.9792 20.3333 55.0625 21.625C54.1875 22.9167 53.4792 24.4583 52.9375 26.25C52.4375 28.0417 52.1875 30 52.1875 32.125C52.1875 34.0833 52.5417 35.9375 53.25 37.6875C53.9583 39.3958 55 40.9167 56.375 42.25C57.7917 43.5833 59.5208 44.6875 61.5625 45.5625C63.6042 46.4375 65.9792 47 68.6875 47.25V50.1875Z"
            fill="#fbe668"
          />
        </svg>
      </div>
      <div class="mt-9 h-[394px] relative">
        <div class="absolute inset-y-0 right-0 w-[88px] flex flex-col">
          <div class="grow flex justify-center">
            <div class="w-0.5 h-full bg-[#57543a]"></div>
          </div>
          <div
            class="shrink-0 uppercase px-2 pt-4 pb-2 flex items-center tracking-[.45em] font-semibold vertical-text"
          >
            the goods
          </div>
        </div>

        <div
          class="absolute text-sm card"
          style="left: 24px; top: 40px; width: 248px; height: 310px"
        >
          <div class="card-inner">
            <div class="item">
              <div class="h-full w-full face-front item-content">
                <div
                  class="text-center uppercase text-lg font-bold tracking-[.20em] title"
                >
                  iron stand
                </div>
                <div class="text-center mt-1 supplier">
                  supplied by KEVINSTYLE
                </div>
                <div
                  class="flex items-baseline justify-center space-x-2 mt-3 tracking-[.20em]"
                >
                  <span class="text-2xl font-bold price">345</span>
                  <div class="font-bold text-lg">USD</div>
                </div>
                <div
                  class="flex items-center justify-center mt-2 space-x-2 font-semibold"
                >
                  <span class="from">NEW YORK</span
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="w-5 h-5"
                    viewBox="0 0 24 24"
                    fill="none"
    .........完整代码请登录后点击上方下载按钮下载查看