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