gsap实现手机卡片式交互UI效果代码-html代码-BFW代码库

代码语言：html
代码描述：gsap实现手机卡片式交互UI效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

body {
  font-family: "Roboto", sans-serif;
  color: white;
  background: linear-gradient(180deg, #ae5c49 0%, #593733 100%);
}

.mock-window {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 72px 1fr 100px;
  background-color: #131517;
}

@media (min-width: 640px) {
  .mock-window {
    width: 414px;
    height: 896px;
  }
}

.device-details {
  grid-row: 1/2;
  grid-column: 1/2;
}
.page {
  grid-row: 1/4;
  grid-column: 1/2;
}
.backdrop {
  grid-row: 1/4;
  grid-column: 1/2;
  background: #171010;
  display: none;
}
.bottom-nav {
  grid-row: 3/4;
  grid-column: 1/2;
}

.device-top {
  height: 72px;
}
.nav {
  height: 120px;
}
.titles {
  height: 72px;
}

.tabs {
  height: 48px;
}

.card {
  border-radius: 24px;
}

.card-1 {
  background: url("//repo.bfw.wiki/bfwrepo/image/5e965addb956a.png");
  background-size: 366px 366px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
.card-2 {
  background: url("//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png");
  background-size: 366px 366px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
.card-3 {
  background: url("//repo.bfw.wiki/bfwrepo/image/5f97a6be6a396.png");
  background-size: 366px 366px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

.tab-selected {
  background-color: #444346;
}

.text-secondary {
  color: #9fa1a3;
}

.absolute-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.test {
  transform: translate(-100px, -100px);
}
.test1 {
  transform: translate(0px, -100px);
}
.test2 {
  transform: translate(100px, -100px);
}

.btn-options {
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}
</style>




</head>

<body  >
  <div class="w-full h-screen overflow-hidden flex items-center justify-center">
  <div class="mock-window">
    <div class="page overflow-hidden">
      <div class="device-top hidden sm:block"></div>
      <div class="nav overflow-hidden mt-6 sm:mt-0">
        <div class="title-sets">
          <div class="title-set-1">
            <div class="titles">
              <div class="uppercase px-6 text-secondary">
                Sunday, September 7
              </div>
              <div class="px-6 font-bold" style="font-size: 30px">
                For You
              </div>
            </div>
            <div class="tabs flex px-6 justify-between">
              <button class="tab-selected px-5 rounded-full">Nature</button>
              <button class="px-5 rounded-full text-secondary">City</button>
              <button class="px-5 rounded-full text-secondary">
                People
              </button>
              <button class="px-5 rounded-full text-secondary">
                Animals
              </button>
            </div>
          </div>
          <div class="title-set-2">
            <div class="titles flex items-center justify-between">
              <div class="">
                <div class="uppercase px-6 text-secondary">Collections</div>
                <div class="px-6 font-bold" style="font-size: 30px">
                  Plants
                </div>
              </div>
              <div class="pr-6 h-full flex items-center">
                <div class="rounded-full p-2 flex items-center justify-center" style="
                        height: 50px;
                        width: 50px;
                        background-color: #424446;
                      ">
                  <img src="//repo.bfw.wiki//bfwrepo/svg/card-interactions-gsap-list.svg" alt="" class="w-full h-full" />
                </div>
                <div class="
                        rounded-full
                        ml-4
                        p-2
                        flex
                        items-center
                        justify-center
                      " style="
                        height: 50px;
                        width: 50px;
                        background-color: #1e1e20;
                      ">
                  <img src="//repo.bfw.wiki//bfwrepo/svg/card-interactions-gsap-grid.svg" alt="" class="w-full h-full" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="p-6 section-1 overflow-hidden" style="height: 414px" id="section-1">
        <div class="card-set relative" style="border-radius: 24px; height: 366px; width: 366px">
          <div class="card card-3 absolute inset-0 flex items-end">
            <div class="p-6">
              <div class="flex items-center user-details">
                <div class="avatar-border rounded-full" style="width: 64px; height: 64px">
                  <img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" alt="" class="w-full rounded-full" />
                </div>
                <div class="ml-3">
                  <div class="font-bold" style="font-size: 21px">
                    Emma Wallace
                  </div>
                  <div class="">13 Photos</div>
                </div>
              </div>
            </div>
          </div>
          <div class="card card-2 absolute inset-0 flex items-end">
            <div class="p-6">
              <div class="flex items-center user-details">
                <div class="avatar-border rounded-full" style="width: 64px; height: 64px">
                  <img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" alt="" class="w-full rounded-full" />
                </div>
                <div class="ml-3">
                  <div class="font-bold" style="font-size: 21px">
                    Harry Sans
                  </div>
                  <div class="">16 Photos</div>
                </div>
              </div>
            </div>
          </div>
          <div class="card card-1 absolute inset-0 flex items-end">
            <div class="p-6">
              <div class="flex items-center user-details">
                <div class="avatar-border rounded-full" style="width: 64px; height: 64px">
                  <img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" alt="" class="w-full rounded-full" />
                </div>
                <div class="ml-3">
                  <div class="font-bold" style="font-size: 21px">
                    Emma Wallace
                  </div>
                  <div class="">13 Photos</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="px-6 gallery">
          <div class="flex items-center mt-6">
            <img src="//repo.bfw.wiki//bfwrepo/svg/card-interactions-gsap-pin.svg" alt="" style="height: 16px" />
            <div class="ml-1 font-semibold">New Zeland</div>
          </div>
          <div class="py-4 text-secondary" style="font-size: 18px">
            A New Zeland based product designer who specializes in
            interaction design
          </div>
          <div class="flex mt-2">
            <div class="w-1/2 pr-3">
              <div class="py-3 w-full" style="height: 190px">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" class="w-full h-full object-.........完整代码请登录后点击上方下载按钮下载查看