gsap+css实现三维幻灯片切换动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：幻灯片
代码描述：gsap+css实现三维幻灯片切换动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  height: 100vh;
  width: 100%;
}

.credits {
  color: #333;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 0;
}

.ghoul-grid {
  display: flex;
  justify-content: center;
}

.ghoul-grid-ghoul {
  height: 100px;
  width: 100px;
  background: #aaa;
  position: relative;
  margin: 20px;
  cursor: pointer;
}
.ghoul-grid-ghoul svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.modal {
  height: 100vh;
  display: grid;
  place-content: center;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  z-index: 5;
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 50px;
  width: 50px;
  border: 1px solid #222;
  color: #222;
  border-radius: 100px;
  cursor: pointer;
  display: grid;
  place-content: center;
  z-index: 999;
}

.arrow {
  position: absolute;
  top: 50%;
  height: 50px;
  width: 50px;
  border: 1px solid #222;
  color: #222;
  border-radius: 100px;
  cursor: pointer;
  display: grid;
  place-content: center;
  z-index: 999;
}
.arrow--prev {
  left: 20px;
}
.arrow--next {
  right: 20px;
}

.card-wrapper {
  width: 450px;
  height: 650px;
  position: relative;
  transform-style: preserve-3d;
  perspective: 3000px;
  --riser: 25px;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  transform: rotateY(180deg);
  visibility: hidden;
  --ghoul-logo-fill: rgba(255, 255, 255, 0.3);
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  transform: translateZ(-2px) rotateY(180deg);
  background: #ffe14b;
  display: grid;
  place-content: center;
}
.back svg {
  width: 180px;
}

.front {
  z-index: 2;
  background: #4ba877;
  padding: 22px;
  transform-style: preserve-3d;
  will-change: transform;
}
.front .ghoul {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 100%;
  will-change: transform;
  background: #333;
  transform-style: preserve-3d;
  z-index: 5;
}
.front .riser {
  position: absolute;
  backface-visibility: hidden;
  width: 100%;
  height: var(--riser);
  background: #736673;
}
.front .riser--1 {
  left: 0px;
  top: 0px;
  transform-origin: top center;
  transform: rotateX(90deg);
}
.front .riser--2 {
  right: 0px;
  top: 0px;
  transform-origin: top right;
  transform: translateZ(var(--riser)) rotate(-90deg) rotateX(-90deg);
}
.front .riser--3 {
  left: 0px;
  bottom: 0px;
  transform-origin: bottom center;
  transform: rotateX(-90deg);
}
.front .riser--4 {
  left: 0px;
  top: 0px;
  transform-origin: top left;
  transform: translateZ(var(--riser)) rotate(90deg) rotateX(-90deg);
}
.front .shadow {
  height: 100%;
  background: #000;
  opacity: 0.5;
  bottom: -40px;
  left: 0;
  filter: blur(20px);
}
.front .ghoul-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  transform: translateZ(var(--riser));
  backface-visibility: hidden;
}
.front .logo-wrapper {
  position: relative;
  margin-top: -22px;
}
.front .logo-wrapper .card-name {
  width: 80%;
  position: absolute;
  top: 70px;
  height: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.front .bottom-wrapper {
  position: absolute;
  width: calc(100% - 40px);
  bottom: 20px;
  left: 20px;
  display: flex;
  justify-content: space-between;
}
.front .bottom-wrapper .qr-wrapper {
  max-width: 60px;
  max-height: 60px;
  position: relative;
}
.front .bottom-wrapper .qr-wrapper svg {
  width: 100%;
  height: 100%;
}
.front .bottom-wrapper .number-wrapper {
  max-width: 120px;
  max-height: 60px;
}
.front .bottom-wrapper .number-wrapper svg {
  width: 100%;
  height: 100%;
}
.front .bottom-wrapper .description {
  color: #fff;
  font-size: 14px;
  font-family: sans-serif;
  width: calc(100% - 100px);
  margin: 0 20px;
  padding: 0;
}
</style>



</head>

<body  >
  <!-- generic symbols -->
<svg style="display: none">
  <symbol id="ghoul-logo" viewBox="0 0 400 115">
    <g fill="var(--ghoul-logo-fill)" fill-rule="nonzero">
      <path d="M0 0v115h75V40H40v42.1h-5V35h40V0zM120 0v41.1h-5V0H80v115h35V73.9h5V115h35V0zM160 0v115h75V0h-75zm40 85h-5V30h5v55zM279.9 0v82.1h-5V0H240v115h75V0zM355 0h-35v115h80V80h-45z" />
    </g>
  </symbol>
  <symbol id="back-logo" viewBox="0 0 180 244">
    <g fill="#99872D" fill-rule="nonzero">
      <path d="M0 0h180v64.3H64.3v51.4h51.4V77.1H180V180H0zM0 244h33v-32.8H18.3v18.2h-3.6v-21.8H33V193H0zM54.3 193v18.2h-3.6V193H36v51h14.7v-18.2h3.6V244H69v-51zM72 193v51h33v-51H72zm19 37h-4v-22h4v22zM127.3 229.4h-3.6V193H108v51h35v-51h-15.7zM161 193h-15v51h34v-18h-19z" />
    </g>
  </symbol>
</svg>

<!-- ghoul symbols -->
<svg style="display: none">
  <symbol id="ghoul-1" viewBox="0 0 1600 1600">
    <g fill="none" fill-rule="nonzero">
      <path fill="#134252" d="M0 0v1600h600v-100h400v100h600V0H0zm1500 1500h-400v-100H500v100H100V100h1400v1400z" />
      <path fill="#40AECC" d="M1000 400h300v100h-300z" />
      <path fill="#E37A25" d="M1000 600h100v100h-100z" />
      <path fill="#FDE04B" d="M1600 1600v-100h-100v100z" />
      <path fill="#988631" d="M1515 1515h70v25h-45v20h20v-15h25v40h-70z" />
      <path fill="#40AECC" d="M300 400h300v100H300z" />
      <path fill="#E37A25" d="M500 600h100v100H500z" />
      <path fill="#66CCE9" d="M800 100H100v100h1400V100z" />
      <path fill="#78979F" d="M600 1500v100h400v-100z" />
      <path fill="#368DA4" d="M1200 1200v100H400v-100H300v300h200v-100h600v100h200v-300z" />
      <path fill="#1B5A7B" d="M1200 1100V900h-100v300H500V900H400v200H300v100h100v100h800v-100h100v-100z" />
      <path fill="#134252" d="M900 300v600h500V300H900zm100 300h300v200h-300V600zm0-200h300v100h-300V400zM200 300v600h500V300H200zm400 500H300V600h300v200zm0-300H300V400h300v100z" />
      <path fill="#F6EE3E" d="M500 700V600H300v200h300V700zM1100 700V600h200v200h-300V700z" />
      <path fill="#368DA4" d="M100 200v700h100V300h500v300h200V300h500v600h100V200z" />
      <path fill="#66CCE9" d="M900 900V600H700v300H500v300h600V900zM100 900v600h200v-400h100V900zM1500 900v600h-200v-400h-100V900z" />
    </g>
  </symbol>
  <symbol id="ghoul-2" viewBox="0 0 1600 1600">
    <defs />
    <g fill="none" fill-rule="nonzero">
      <path fill="#402640" d="M0 0v1600h300v-100h1000v100h300V0H0zm400 1400H300v-100h100v100zm200 0H500v-100h100v100zm300 0H700v-100h200v100zm200 0h-100v-100h100v100zm200 0h-100v-100h100v100zm200 100h-100v-300H200v300H100V100h1400v1400z" />
      <path fill="#FDE04B" d="M1600 1600v-100h-100v100z" />
      <path fill="#988631" d="M1515 1515h70v25h-45v20h20v-15h25v40h-70z" />
      <path fill="#8B5F90" d="M600 1100H200V800H100v700h100v-300h400z" />
      <path fill="#402640" d="M200 300v800h500V300H200zm400 700H300V400h300v600z" />
      <path fill="#DF2564" d="M300 400h300v200H300z" />
      <path fill="#333332" d="M300 600h100v200H300z" />
      <path fill="#F7EF3C" d="M400 600v200H300v100h300V600z" />
      <path fill="#FAC43D" d="M600 1000H300V900h300z" />
      <path fill="#F8EACC" d="M300 1300h100v100H300zM500 1300h100v100H500z" />
      <path fill="#8B5F90" d="M200 200h500v100H200zM1000 1100h400V800h100v700h-100v-300h-400z" />
      <path fill="#AC75B3" d="M100 100v700h100V200h500v900H600v99h400v-99H900V200h500v600h100V100z" />
      <path fill="#402640" d="M900 300v800h500V300H900zm100 100h300v600h-300V400z" />
      <path fill="#DF2564" d="M1000 400h300v200h-300z" />
      <path fill="#333332" d="M1200 600h100v200h-100z" />
      <path fill="#F7EF3C" d="M1200 600v200h100v100h-300V600z" />
      <path fill="#FAC43D" d="M1000 1000h300V900h-300z" />
      <path fill="#F8EACC" d="M1200 1300h100v100h-100zM1000 1300h100v100h-100z" />
      <path fill="#8B5F90" d="M900 200h500v100H900z" />
      <path fill="#F8EACC" d="M700 1300h200v100H700z" />
      <path fill="#9C7F9C" d="M300 1500h1000v100H300z" />
    </g>
  </symbol>
  <symbol id="ghoul-3" viewBox="0 0 1600 1600">
    <defs />
    <g fill="none" fill-rule="nonzero">
      <path fill="#397EB9" d="M900 200h500v100H900z" />
      <path fill="#28313A" d="M900 300v800h500V300H900zm100 100h300v600h-300V800h100V600h-100V400z" />
      <path fill="#4679A9" d="M1000 400h300v100h-300z" />
      <path fill="#305678" d="M1000 500h300v100h-300z" />
      <path fill="#F5F077" d="M1100 800V600h200v400h-300V800z" />
      <path fill="#377FB9" d="M1100 1300v-200h300v-100h100v500h-200v-100h-300v-100z" />
      <path fill="#397EB9" d="M200 200h500v100H200z" />
      <path fill="#28313A" d="M200 300v800h500V300H200zm400 400H500v100h100v200H300V400h300v300z" />
      <path fill="#4679A9" d="M300 400h300v200H300z" />
      <path fill="#305678" d="M300 600h300v100H300z" />
      <path fill="#F5F077" d="M500 800V700H300v300h300V800z" />
      <path fill="#377FB9" d="M500 1300v-200H200v-100H100v500h200v-100h300v-100z" />
      <path fill="#262D35" d="M0 0v1600h400v-100h800v100h400V0H0zm1500 1500h-200v-100H300v100H100V100h1400v1400z" />
      <path fill="#5F9ED3" d="M100 100v900h100V200h500v100h200V200h500v800h100V100z" />
      <path fill="#25537E" d="M900 1200v100H700v-100H500v100h100v100h400v-100h100v-100z" />
      <path fill="#89BAE2" d="M900 1100V300H700v800H500v100h200v100h200v-100h200v-100z" />
      <path fill="#FDE04B" d="M1600 1600v-100h-100v100z" />
      <path fill="#988631" d="M1515 1515h70v25h-45v20h20v-15h25v40h-70z" />
      <path fill="#7A7775" d="M400 1500h800v100H400z" />
    </g>
  </symbol>
  <symbol id="ghoul-4" viewBox="0 0 1600 1600">
    <path fill="#C37ACC" d="M0 0h1600v1600H0z" />
    <path fill="#9C7F9C" d="M300 1500h1000v100H300z" />
    <path fill=&.........完整代码请登录后点击上方下载按钮下载查看