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