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

gsap+tailwind实现商品切换卡片效果代码

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