gsap+Draggable实现响应式可缩放拖动窗体对话框效果代码-html代码-BFW代码库

gsap+Draggable实现响应式可缩放拖动窗体对话框效果代码

代码语言：html

所属分类：拖放

代码描述：gsap+Draggable实现响应式可缩放拖动窗体对话框效果代码，拖动右下角缩放键，改变窗体大小，内部小蛇也改变形态。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          box-sizing: border-box;
        }
        body {
          display: grid;
          background: #d9d9d9;
          place-items: center;
          min-height: 100vh;
        }
        .dialog {
          overflow: hidden;
          resize: horizontal;
          min-width: 20vmin;
          max-width: calc(50vmin + 0.5rem);
          position: absolute;
          padding: 0;
          border-width: 0.25rem;
          border-radius: 2vmin 2vmin 0 0;
        }
        .dialog__header {
          height: 44px;
          background: #404040;
          border-bottom: 0.25rem solid #000;
          z-index: 2;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 0 1rem;
          gap: 0.5rem;
        }
        svg {
          width: 50vmin;
          max-width: 50vmin;
          aspect-ratio: 1;
        }
        .dialog__control {
          height: 40%;
          background: var(--bg, #f00);
          aspect-ratio: 1;
          border-radius: 50%;
        }
        .dialog__control--exit {
          --bg: #f2330d;
        }
        .dialog__control--minimize {
          --bg: #fa0;
        }
        .dialog__control--maximize {
          --bg: #19e619;
        }
    </style>



</head>

<body>
    <dialog class="dialog" open="open">
        <div class="dialog__header">
            <div class="dialog__control dialog__control--exit"></div>
            <div class="dialog__control dialog__control--minimize"></div>
            <div class="dialog__control dialog__control--maximize"></div>
        </div>
        <svg class="snek" viewbox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
    <marker id="tail" viewbox="0 0 36 20" refx="35" refy="10" markerunits="strokeWidth" orient="auto" markerwidth="10" markerheight="1">
      <path d="M36 20C36 20 -4.80825e-07 14.5 -8.74228e-07 10C-1.26763e-06 5.5 36 -1.90735e-06 36 -1.90735e-06L36 20Z" fill="#7FF40A"></path>
    </marker>
    <marker id="head" viewbox="0 0 46 46" refx="1" refy="26" markerunits="strokeWidth" orient="auto" markerwidth="2" markerheight="10">
      <path class="snek__tongue" d="M13 23.838H46L40.5 26.338L46 28.838H13V23.838Z" fill="#FF0303"></path>
      <path d="M0 16.838C0 16.838 3.5 11.838 14 4.33803C20.6233 -0.3929 35.4385 -0.723473 37 0.838049C39 2.83804 40.6485 11.3588 36 13.838C28.5 17.838 17.6697 19.9298 16.5 27.338C15 36.838 30.5 35.238 26 43.338C21.5 51.438 0 36.838 0 36.838V16.838Z" fill="#7FF40A"></path>
      <circle class="snek__eye snek__eye--white" cx="14" cy="13.838" r="6" fill="white"></circle>
      <circle class="snek__eye snek__eye--pupil" cx="14" cy="13.838" r="3&qu.........完整代码请登录后点击上方下载按钮下载查看