gsap+svg+Draggable3+InertiaPlugin实现拖动不同颜色的铅笔到对应笔迹下面代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：gsap+svg+Draggable3+InertiaPlugin实现拖动不同颜色的铅笔到对应笔迹下面代码，拖动正确后笔迹会往下绘制出来。

代码标签： gsap svg Draggable3 InertiaPlugin 拖动铅笔笔迹

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --fill-color: #f7eae2;
          --wood-color: #dab28e;
          --start: 100;
          --space: 170;
          --white: #f7eae2;
          --pink: #f498c0;
          --lightblue: #7cc0ea;
          --brown: #603917;
          --black: #231f1f;
          --red: #ee3124;
          --orange: #f57f29;
          --yellow: #fff000;
          --green: #58b947;
          --navy: #0054a6;
          --purple: #9f248f;
        }
        
        * {
          box-sizing: border-box;
        }
        
        body {
          display: grid;
          place-items: center;
          height: 100vh;
          width: 100vw;
          background-color: #f5ebe2;
          background-image: url("https://assets.codepen.io/1385231/moonpaper.jpg");
        }
        
        svg {
          height: auto;
          max-width: 99vw;
          max-height: 99vh;
          opacity: 0;
        }
        
        .space {
          --width: calc(3000px / 11);
          width: var(--width);
          opacity: 0;
        }
        
        .pencil {
          x: 0;
          filter: url(#pencil-filter);
        }
        
        .scribbles,
        .space-scribbles {
          filter: url(#scribble);
        }
        .scribbles path,
        .space-scribbles path {
          transform-origin: bottom center;
          stroke: var(--fill-color, black);
          stroke-width: 9;
          stroke-linecap: round;
        }
        
        .space-scribble {
          stroke-dasharray: 12248;
          stroke-dashoffset: 12248;
          transition: all 2s;
        }
        
        .space-scribble.win {
          stroke-dashoffset: 0;
        }
        
        .space-0 {
          x: calc(0 * var(--width));
        }
        
        .space-1 {
          x: calc(1 * var(--width));
        }
        
        .space-2 {
          x: calc(2 * var(--width));
        }
        
        .space-3 {
          x: calc(3 * var(--width));
        }
        
        .space-4 {
          x: calc(4 * var(--width));
        }
        
        .space-5 {
          x: calc(5 * var(--width));
        }
        
        .space-6 {
          x: calc(6 * var(--width));
        }
        
        .space-7 {
          x: calc(7 * var(--width));
        }
        
        .space-8 {
          x: calc(8 * var(--width));
        }
        
        .space-9 {
          x: calc(9 * var(--width));
        }
        
        .space-10 {
          x: calc(10 * var(--width));
        }
        
        .mask-rect {
          height: 950;
        }
        
        .pencil:nth-child(11n+1) {
          background: white;
          --fill-color: var(--white);
          --index: 1;
        }
        
        .space-scribble:nth-child(11n+1) {
          --stroke-color: var(--white);
        }
        
        .scribbles > path:nth-child(11n+1) {
          --fill-color: var(--white);
          --index: 1;
        }
        
        .pencil:nth-child(11n+2) {
          background: pink;
          --fill-color: var(--pink);
          --index: 2;
        }
        
        .space-scribble:nth-child(11n+2) {
          --stroke-color: var(--pink);
        }
        
        .scribbles > path:nth-child(11n+2) {
          --fill-color: var(--pink);
          --index: 2;
        }
        
        .pencil:nth-child(11n+3) {
          background: lightblue;
          --fill-color: var(--lightblue);
          --index: 3;
        }
        
        .space-scribble:nth-child(11n+3) {
          --stroke-color: var(--lightblue);
        }
        
        .scribbles > path:nth-child(11n+3) {
          --fill-color: var(--lightblue);
          --index: 3;
        }
        
        .pencil:nth-child(11n+4) {
          background: brown;
          --fill-color: var(--brown);
          --index: 4;
        }
        
        .space-scribble:nth-child(11n+4) {
          --stroke-color: var(--brown);
        }
        
        .scribbles > path:nth-child(11n+4) {
          --fill-color: var(--brown);
          --index: 4;
        }
        
        .pencil:nth-child(11n+5) {
          background: black;
          --fill-color: var(--black);
          --index: 5;
        }
        
        .space-scribble:nth-child(11n+5) {
          --stroke-color: var(--black);
        }
        
        .scribbles > path:nth-child(11n+5) {
          --fill-color: var(--black);
          --index: 5;
        }
        
        .pencil:nth-child(11n+6) {
          background: red;
          --fill-color: var(--red);
          --index: 6;
        }
        
        .space-scribble:nth-child(11n+6) {
          --stroke-color: var(--red);
        }
        
        .scribbles > path:nth-child(11n+6) {
          --fill-color: var(--red);
          --index: 6;
        }
        
        .pencil:nth-child(11n+7) {
          background: orange;
          --fill-color: var(--orange);
          --index: 7;
        }
        
        .space-scribble:nth-child(11n+7) {
          --stroke-color: var(--orange);
        }
        
        .scribbles > path:nth-child(11n+7) {
          --fill-color: var(--orange);
          --index: 7;
        }
        
        .pencil:nth-child(11n+8) {
          background: yellow;
          --fill-color: var(--yellow);
          --index: 8;
        }
        
        .space-scribble:nth-child(11n+8) {
          --stroke-color: var(--yellow);
        }
        
        .scribbles > path:nth-child(11n+8) {
          --fill-color: var(--yellow);
          --index: 8;
        }
        
        .pencil:nth-child(11n+9) {
          background: green;
          --fill-color: var(--green);
          --index: 9;
        }
        
        .space-scribble:nth-child(11n+9) {
          --stroke-color: var(--green);
        }
        
        .scribbles > path:nth-child(11n+9) {
          --fill-color: var(--green);
          --index: 9;
        }
        
        .pencil:nth-child(11n+10) {
          background: navy;
          --fill-color: var(--navy);
          --index: 10;
        }
        
        .space-scribble:nth-child(11n+10) {
          --stroke-color: var(--navy);
        }
        
        .scribbles > path:nth-child(11n+10) {
          --fill-color: var(--navy);
          --index: 10;
        }
        
        .pencil:nth-child(11n+11) {
          background: purple;
          --fill-color: var(--purple);
          --index: 11;
        }
        
        .space-scribble:nth-child(11n+11) {
          --stroke-color: var(--purple);
        }
        
        .scribbles > path:nth-child(11n+11) {
          --fill-color: var(--purple);
          --index: 11;
        }
    </style>


</head>

<body>
    <svg viewBox="0 0 3000 2300" fill="none" xmlns="http://www.w3.org/2000/svg" id="container">
  <defs>
    <filter id='scribble'>
      <feturbulence basefrequency='0.05' id='turbulence' numoctaves='2' result='noise' seed='0'></feturbulence>
      <fedisplacementmap id='displacement' in2='noise' in='SourceGraphic' scale='3'></fedisplacementmap>
    </filter>

    <filter id='pencil-filter'>
      <feturbulence basefrequency='0.05' id='turbulence' numoctaves='2' result='noise' seed='0'></feturbulence>
      <feOffset result="offOut" in="SourceAlpha" dx="2" dy="5" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="4" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" result="newGraphic" />
      <fedisplacementmap id='displacement' in2='noise' in='newGraphic' scale='3'></fedisplacementmap>
    </filter>

    <mask id="pencil-mask">
      <path d="M2 158C2 134.5 36 11 38 4.5s8.5-4 10.5 0S92 148.5 92 158v371a24 24 0 0 1-24 24H26a24 24 0 0 1-24-24V158Z" fill="#fff" />
      <rect y="480" x="1.5" width="90" fill="#fff" rx="35" ry="20" height="950" />
    </mask>

    <g id="pencil-source" mask="url(#pencil-mask)">

      <rect y="0" x="0" width="90" fill="black" rx="15" ry="15" height="1435" style="fill: var(--fill-color);" />
      <path d="M69.5 74C80.6 112.1 92 153 92 158v1a61 61 0 0 0-20-4c-5.4 0-9.5 2.8-14.3 6.1-6.8 4.7-15 10.4-30.2 10.4-10.7 0-18.3-7-25.5-15 .6-12.5 8-44.8 16-76.5 17.3 7.4 39 9.3 51.5-6Z" style="fill: var(--wood-color);" />
      <path opacity=".07" fill="#171D22" d="M0 25h28v1410H0z" />
      <path opacity=".16" fill="#171D22" d="M67 47h27v1388H67z" />
    </g>
    <g id="space-scribble">
      <path id="space-scribble-path" d="m211 1496-95-2c-19 0-40-1-52-20 42-7 107-13 149-20-2-14-15-17-25-17l-178-3c-1-5 4-9 8-11 56-26 154-13 210-37-4-11-15-13-24-13l-181 1c59-10 152-21 211-31l-221-9c80-45 144-18 222-67-81-12-144 12-224-12l224-43-228-9 87-17c34-6 89-13 121-27l-194-1c32-22 89-21 124-27 29-5 57-15 85-24l-218-3c60-19 122-34 163-46 16-5 45-10 60-18-64-20-154 0-219 6 52-24 144-49 197-64-47 12-135 11-183 14 46-22 122-40 171-52-57 0-134-1-191-5 12-13 28-17 43-22 51-14 118-24 169-32H71c-18 0-37 0-54-7 65-18 151-13 212-48-57 2-130 1-187-3 44-17 126-31 171-42-55 5-146 5-201 4 66-19 151-39 217-58l-157-1c-15 0-31 0-46 5 63-26 145-52 210-60H60c-17 0-33 0-48 7 54-10 155-22 208-38-55-1-128-2-183 2 46-4 110-17 153-40 11-6 22-12 34-13-63 15-147-4-209 14 47-15 98-25 146-30 21-2 44-3 64-14-75-1-142-14-217-8 81-14 149-53 231-58-78 19-150-17-228 1 34-14 62-23 98-27 40-4 81-1 120-16-74 19-149-8-224-5 71-22 155-23 223-57-22 0-44 1-66-1l-63-7c-28-2-56 2-84 6 64-37 150-32 218-52-14-4-29-4-43-4l-172-1 165-33c15-3 29-6 43-14-16 4-32 4-48 4-50 0-115 0-165-2 9-6 20-6 30-6 57 0 129-9 185-27-65 3-144 5-207-11 65-18 146-31 212-39-6.........完整代码请登录后点击上方下载按钮下载查看