gsap实现可配置拆解字牌翻转动画效果代码-html代码-BFW代码库

gsap实现可配置拆解字牌翻转动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现可配置拆解字牌翻转动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

@layer normalize, base, demo, flip, explode;

@layer explode {
  [data-explode='true'] {
    .flip {
      translate: 0 0;
    }
    .flip-debug div:nth-of-type(1),
    .flip div:nth-of-type(1) {
      translate: -120% -55%;
    }
    .flip-debug div:nth-of-type(2),
    .flip div:nth-of-type(2) {
      translate: 120% -55%;
    }
    .flip-debug div:nth-of-type(3),
    .flip div:nth-of-type(3) {
      translate: -120% 55%;
      -webkit-backface-visibility: visible;
              backface-visibility: visible;
    }
    .flip-debug div:nth-of-type(4),
    .flip div:nth-of-type(4) {
      translate: 120% 55%;
    }
    .flip-debug,
    .flip-debug div {
      opacity: 1;
    }
    .board {
      transform: rotateX(-32deg) rotateY(32deg);
      transition-delay: 0s;
    }
    .flip-debug,
    .flip-debug div,
    .flip div {
      transition-delay: 0.6s;
    }
    .flip-debug,
    .flip-debug div {
      transition-delay: 0.6s, 1s;
    }
    .flip-debug div:nth-of-type(1)::after,
    .flip-debug div:nth-of-type(3)::after {
      content: 'next';
      color: canvasText;
      position: absolute;
      right: calc(100% + 1rem);
    }
    .flip-debug div:nth-of-type(3)::after {
      content: 'current';
    }
  }

  [data-explode='true'] .flip {
    perspective: 3.5em;
  }

  /* transitions */
  .board {
    transition: transform 0.5s;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    transition-delay: 1s;
  }
  .flip-debug,
  .flip-debug div,
  .flip div {
    transition-property: translate, opacity;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    transition-delay: 0.4s, 0s;
  }

  .board {
    position: relative;
    transform-style: preserve-3d;
  }
  .flip-debug,
  .flip-debug div {
    pointer-events: none;
    position: absolute;
    outline-offset: 2px;
    inset: 6px;
    z-index: -1;
    opacity: 0;
  }
  .flip-debug::after {
    content: '';
    inset: -6px;
    outline: 2px dashed canvasText;
    position: absolute;
  }
  .flip-debug div,
  .flip-debug::after {
    outline: 2px dashed canvasText;
  }
  .flip-debug div {
    inset: 0;
  }
}

@layer flip {
  /* map 0-180 against a brightness range */

  .flip div:nth-of-type(1) {
    /* 0-90 will be 0-1 */
    filter: brightness(calc(1 / 90 * clamp(0, var(--flipped), 90)));
  }
  .fli.........完整代码请登录后点击上方下载按钮下载查看