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