gsap+Physics2DPlugin实现抛硬币到洞中交互效果代码-html代码-BFW代码库

gsap+Physics2DPlugin实现抛硬币到洞中交互效果代码

代码语言：html

所属分类：动画

代码描述：gsap+Physics2DPlugin实现抛硬币到洞中交互效果代码，按住可看到抛出的强度力度。

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

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

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

  <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0"
    />
  
  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@layer normalize, base, demo;

@layer demo {
  :root {
    --ru: 15;
  }

  [data-flipped='true'] .arrow {
    opacity: 0;
  }

  .tp-lblv.tp-v-disabled .tp-lblv_l {
    /* color: var(--lbl-fg) !important; */
    opacity: 1 !important;
  }

  :root:has([aria-label]:active) .tp-txtv.tp-v-disabled {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }

  .arrow {
    display: inline-block;
    opacity: 0.8;
    position: fixed;
    font-size: 0.875rem;
    font-family: 'Gloria Hallelujah', cursive;
    transition: opacity 0.26s 0.26s ease-out;

    &.arrow--instruction {
      top: 50%;
      left: 50%;
      translate: -190% 150%;
      rotate: -10deg;
      svg {
        color: hsl(0 0% 65%);
        scale: 1 1;
        top: 130%;
        rotate: 20deg;
        left: -10%;
        width: 80%;
        translate: 105% 40%;
        position: absolute;
      }
    }
  }
  .tp-txtv.tp-v-disabled {
    height: 14.3px;
    background: repeating-linear-gradient(
      90deg,
      var(--lbl-fg) 0 3%, #0000 3% 5%);
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
    transition: -webkit-clip-path 0.26s;
    transition: clip-path 0.26s;
    transition: clip-path 0.26s, -webkit-clip-path 0.26s;
    input {
      display: none;
    }
  }
  main {
    scale: 1.2;
    transform: translate3d(0, 0, 100vmax);
  }
  [aria-label] {
    touch-action: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: #0000;
    --bg: #1871f4;
    background: var(--bg);
    border-radius: 6px;
    font-size: 0.875rem;
    color: #fff;
    font-family: inherit;
    border: 1px solid color-mix(in oklch, var(--bg), #000 12%);
    cursor: pointer;
    transform-origin: 75% 50%;
    transition: transform 0.26s, box-shadow 0.26s, background 0.18s;
    padding: 0;
    --shadow-color: 0 0% 0%;
    box-shadow: 0px 0.6px 0.7px hsl(var(--shadow-color) / 0.14),
      0px 2.3px 2.6px -0.8px hsl(var(--shadow-color) / 0.14),
      0px 5.9px 6.6px -1.7px hsl(var(--shadow-color) / 0.14),
      0px 14.5px 16.3px -2.5px hsl(var(--shadow-color) / 0.14);

    .content {
      align-items: center;
      -webkit-clip-path: inset(-100vmax 0 1px 0);
              clip-path: inset(-100vmax 0 1px 0);
      display: flex;
      gap: 0.75rem;
      padding: 0.5rem 0.75rem;
      height: 100%;
    }

    &[data-tipping='false']:active {
      transform: rotate(calc(var(--ru) * -1deg));
      box-shadow: -0.5px 0.7px 1px hsl(var(--shadow-color) / 0.14),
        -1.8px 2.3px 3.3px -0.8px hsl(var(--shadow-color) / 0.14),
        -4.6px 6px 8.5px -1.7px hsl(var(--shadow-color) / 0.14),
        -11.4px 14.6px 20.8px -2.5px hsl(var(--shadow-color) / 0.14);
    }

    &:is(:focus-visible, :hover) {
      --bg: color-mix(in oklch, #1871f4, #000 5%);
      transition: transform 0.26s, box-shadow 0.26s, background 0.18s 0.12s;
      .purse {
        rotate: y 360deg;
        transition: rotate 0.26s 0.12s ease-out;
      }
    }

    .purse {
      height: 100%;
      width.........完整代码请登录后点击上方下载按钮下载查看