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 '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, popover, signing;

@layer signing {
  :is(.animated, .signature) {
    width: var(--surface-width);
    pointer-events: none;
    svg {
      width: 100%;
      path {
        stroke-width: 3px;
      }
    }
  }
  [popover][data-signed='true'] {
    :is(canvas, [popover] button, .canvas) {
      pointer-events: none;
    }
    .status {
      translate: 0 100%;
      -webkit-clip-path: inset(-100% 0 0 0);
              clip-path: inset(-100% 0 0 0);
    }
    .secondary button span {
      translate: 0 100%;
    }
  }
  .secondary button span {
    transition: translate 0.2s ease-out;
  }

  [popover][data-valid='true']:has(.hold:active) canvas {
    opacity: 0.1;
  }
  [popover] canvas {
    transition: opacity 0.2s ease-out;
  }

  [popover][data-valid='true'] .hold:active .status {
    transition-duration: calc(var(--sign-on, 0.2) * 1s), 0.2s;
    -webkit-clip-path: inset(-100% 0 0 0);
            clip-path: inset(-100% 0 0 0);
  }

  :root:has([data-signed='true']) .toggle {
    background: hsl(140 80% 90%);
    color: hsl(140 90% 30%);
  }

  .hold {
    padding: 0;
    border: 0;
    border-radius: 4px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    height: 32px;
    position: relative;
    overflow: hidden;

    .status {
      display: inline-block;
      position: absolute;
      inset: 0;
      color: hsl(140 90% 30%);
      -webkit-clip-path: inset(-100% 100% 0 0);
              clip-path: inset(-100% 100% 0 0);
      transition: translate 0.2s ease-out, -webkit-clip-path 0.2s ease-out;
      transition: clip-path 0.2s ease-out, translate 0.2s ease-out;
      transition: clip-path 0.2s ease-out, translate 0.2s ease-out, -webkit-clip-path 0.2s ease-out;
    }

    .track {
      background: hsl(140 80% 90%);
      width: 100%;
      height: 200%;
      display: inline-block;
      display: grid;
      grid-template-rows: 1fr 1fr;
      position: absolute;
      bottom: 0;

      span {
        display: grid;
        place-items: center;
      }
    }

    > span:last-of-type {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
    }
  }
}

@layer popover {
  :root {
    --toggle-size: 44px;
    --surface-width: 380px;
    --surface-height: 200px;
    --shadow-color: 0 0% 0%;
    --shadow: 0px 0.5px 0.6px hsl(var(--shadow-color) / 0.07),
      0px 1.7px 2.2px -0.4px hsl(var(--shadow-color) / 0.09),
      0px 3.2px 4.1px -0.7px hsl(var(--shadow-color) / 0.11),
      -0.1px 6.1px 7.8px -1.1px hsl(var(--shadow-color) / 0.13),
      -0.2px 11.2px 14.3px -1.5px hsl(var(--shadow-color) / 0.15);
  }

  [data-clickable] {
    cursor: default;
  }

  .placeholder {
    width: var(--toggle-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    top: 0;
    left: 0;
    pointer-events: none;
    position: absolute;

    svg {
      width: 20px;
      height: 20px;
    }
  }

  [popover] {
    width: var(--surface-width);
    max-width: calc(100vw - 2rem);
    height: var(--surface-height);
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border-radius: 6px;
    margin: 0;
    inset: unset;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    /* border-color: light-dark(hsl(0 0% 75%), hsl(0 0% 60%));
    border-width: 1px; */
    border: 0;
    background: canvasText;
    color: canvas;
    box-shadow: var(--shadow);

    .popover__content {
      padding: 0.5rem 0;
      display: grid;
      grid-template-rows: auto 1fr auto;
      height: 100%;
      width: 100%;
      filter: blur(4px);
      opacity: 0;
   .........完整代码请登录后点击上方下载按钮下载查看