gsap实现鼠标拖拽手写签名板弹出层效果代码-html代码-BFW代码库

代码语言：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;
      width: var(--surface-width);
      max-width: calc(100vw - 2rem);
      border-radius: inherit;
      font-size: 0.875rem;

      button {
        cursor: pointer;
      }

      header {
        display: flex;
        gap: 0 0.5rem;
        padding-inline: 0.875rem;
        color: light-dark(hsl(0 0% 50%), hsl(0 0% 80%));

        svg {
          width: 16px;
          height: 16px;
          opacity: 0;
        }
      }

      footer {
        padding-inline: 0.5rem;
        display: flex;
        justify-content: space-between;

        .secondary {
          display: flex;
          gap: 0.25rem;

          button {
            display: grid;
            padding: 0;
            place-items: center;
            width: 32px;
            aspect-ratio: 1;
            border: 0;
            background: #0000;
            color: color-mix(in oklch, canvasText, #0000);
            position: relative;
            transition: color 0.2s ease-out;

            span {
              height: 100%;
              width: 100%;
              display: grid;
              place-items: center;
            }

            &::after {
              content: '';
              opacity: 0;
              position: absolute;
              inset: 0;
              border-radius: 6px;
              background: color-mix(in oklch, canvasText, #0000 94%);
              transition: opacity 0.2s ease-out;
            }

            &:is(:hover, :focus-visible) {
              color: canvasText;

              &::after {
                opacity: 1;
              }
            }
          }

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

      .canvas {
        position: relative;
        height: 130px;
      }

      canvas {
        flex: 1;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
      }
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      border: 1px solid light-dark(hsl(0 0% 80%), hsl(0 0% 50%));
    }

    &:popover-open {
      display: flex;
      flex-direction: column;
    }
  }
}

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

    &.arrow--instruction {
      top: 50%;
      left: 50%;
      translate: -160% -70%;
      rotate: -10deg;
      svg {
        color: hsl(0 0% 65%);
        scale: 1 1;
        top: 130%;
        rotate: 35deg;
        left: 10%;
        width: 60%;
        translate: 120% 60%;
        position.........完整代码请登录后点击上方下载按钮下载查看