gsap实现可修改添加购物车路径曲线参数的动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap实现可修改添加购物车路径曲线参数的动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0"
    />

    <link rel="stylesheet" href="./style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
  
  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, prototype, trackpad, sticky-surface, debug;

@layer arrows {
  .arrow {
    font-family: 'Gloria Hallelujah', cursive;
    font-size: 0.875rem;
    position: fixed;
    opacity: 0.8;
    transition: opacity 0.26s ease-out;
    pointer-events: none;

    span {
      white-space: nowrap;
    }
  }
  .arrow--config {
    bottom: 140px;
    right: 120px;
    translate: -50% 0;
    width: 60px;

    svg {
      top: calc(100% + 20px);
      position: absolute;
      rotate: 30deg;
      scale: 1 -1;
      left: 50%;
      width: 60px;
    }
  }
  .arrow--cart {
    top: 100px;
    right: 60px;
    translate: 0 0;
    width: 60px;

    svg {
      bottom: calc(100% + 10px);
      position: absolute;
      left: 75%;
      width: 40px;
      rotate: -10deg;
    }
  }
  .arrow--product {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transform: translate(-180%, 120px);
    width: 60px;

    svg {
      bottom: calc(100% + 10px);
      position: absolute;
      left: 75%;
      width: 60px;
    }
  }
}

@layer debug {
  [data-visualize='true'] {
    .motion-path {
      opacity: 1;
    }
  }
  .motion-path {
    position: fixed;
    z-index: 999999999;
    overflow: visible !important;
    /* right: max(var(--cart-x, 0px), var(--product-x, 0px)); */
    top: min(var(--cart-y, 0px), var(--product-y, 0px));
    /* bottom: var(--product-y, 0px); */
    left: min(var(--cart-x, 0px), var(--product-x, 0px));
    transform: scale(var(--scale-x, 1), var(--scale-y, 1));
    pointer-events: none;
    width: var(--distance-x, 200px);
    height: var(--distance-y, 200px);
    opacity: 0;
    transition: opacity 0.26s ease-out;

    circle {
      fill: currentColor;
      stroke: canvas;
      display: none;
    }

    path {
      stroke-width: 1;
      stroke-linecap: round;
      stroke-dasharray: 2 2;
      stroke: red;
    }
  }
}

@layer trackpad {
  .trackpad-controls {
    position: absolute;
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: auto 1fr;
    align-content: center;
    place-items: center;
    bottom: 0%;
    left: 10%;
    right: 10%;
    accent-color: canvasText;
    transition-property: translate, scale;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    scale: 0.8;
    transform-origin: 50% 0;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    input {
      width: 100%;
    }

    label {
      font-size: 0.75rem;
    }
  }
  .trackpad-holder {
    display: inline-block;
    position: relative;
    width: 160px;
    aspect-ratio: 1;
  }
  .bezier-controls {
    position: relative;
    height: 160px;
    width: 160px;
  }
  .bezier-control {
    padding: 0;
    border: 0;
    color-scheme: dark;
  }
  .bezier-control legend {
    color: var(--lbl-fg);
    padding-left: 6px;
    margin-bottom: 0.5rem;
  }
  .implant {
    margin-top: 0.5rem;
  }
  .trackpad {
    position: absolute;
    height: 100%;
    width: 100%;
    border: 1px solid color-mix(in lch, canvasText, #0000 75%);
    border-radius: 4px;
    cursor: crosshair;
    background-color: canvas;
    transition: background-color 0.2s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    touch-action: none;
    z-index: 10;
    container-type: size;
    background-image: repeating-radial-gradient(circle at center, red 1px, transparent 1px, transparent 2px);
    background-size: 4px 4px;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: color-mix(in lch, canvasText, #0000 98%);
    }
  }
  
  .trackpad:hover::before {
    background: color-mix(in lch, canvasText, #0000 95%);
  }
  
  .trackpad:active::before {
    background: color-mix(in lch, canvasText, #0000 93%);
  }

  /* SVG styling */
  .bezier-svg {
    width: 160px;
    aspect-ratio: 1;
    /* background: color-mix(in lch, canvasText, #0000 95%); */
    border-radius: 4px;
    border: 1px solid color-mix(in lch, canvasText, #0000 90%);
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
  }

  .grid-line {
    stroke: var(--in-fg);
    stroke-width: 0.5;
    stroke-dasharray: 2 2;
    opacity: 0;
  }

  .control-line {
    stroke: color-mix(in lch, var(--in-fg), #0000 50%);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    transition: all 0.2s;
  }

  .axis-line {
    stroke: color-mix(in lch, canvasText, #0000 50%);
    stroke-width: 0.5;
  }

  .bezier-curve {
    fill: none;
    stroke: var(--in-fg);
    stroke-width: 1.2;
    stroke-linecap: round;
  }


  .anchor-point {
    fill: color-mix(in lch, canvasText, #0000 50%);
    stroke: none;
    opacity: 0;
  }
  
  /* Trackpad markers */
  .trackpad-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--in-fg);
    border: 2px solid var(--in-bg);
    translate: calc(var(--marker-x, 50) * 1cqi) calc(var(--marker-y, 50) * 1cqh);
    transform: translate(-50%, -50%);
    opacity: 0.8;
    z-index: 3;
  }
  .trackpad-marker::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--in-fg);
    border-radius: 50%;
    transition: scale 0.12s ease-out;
    scale: 0;
  }

  .trackpad-marker[data-active]::after,
  .trackpad-marker[data-hover]::after {
    scale: 1;
  }

  .trackpad:hover .trackpad-marker {
    opacity: 1;
  }

  .trackpad.pointer-lock-active .trackpad-marker[data-active] {
    box-shadow: 0 0 0 6px color-mix(in lch, currentColor, #0000 80%);
  }

  /* Pointer lock active state */
  .trackpad.pointer-lock-active {
    outline: 2px dashed color-mix(in lch, canvasText, #0000 50%);
    outline-offset: 2px;
  }
}

div.tp-dfwv {
  width: 256px;
  top: unset;
  bottom: 8px;
  position: fixed;
  z-index: 999999999;
  max-height: calc(100vh - 100px);
  overflow: auto;

  .tp-v-disabled {
    margin-top: 0.25rem;
  }
}

@layer prototype {
  .cart {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    padding: 0;
    position: fixed;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    width: 42px;
    aspect-ratio: 1;
    background: #0000;
    border: 0;
    z-index: 999999;
    
    svg {
      width: 24px;
    }
  }

  .container {
    resize: both;
    overflow: hidden;
    display: grid;
    place-items: center;
    container-type: size;
    min-width: 58px;
    min-height: 58px;
    width: 100px;
    height: 100px;
    padding: 0.5rem;
  }
  .item-details__product {
    position: relative;
    max-height: 100%;
    max-width: 100%;
    min-width: 44px;
    padding: 0.25rem;
    min-height: 44px;
    display: grid;
    place-items: center;
    background: light-dark(hsl(0 0% 90% / 0.7), hsl(0 0% 20% / 0.9));
    border-radius: 6px;
    aspect-ratio: 1;

    img {
      max-height: 100%;
      max-width: 100%;
      width: 100%;
      aspect-ratio: 1;
    }
  }

  :root {
    --speed: .8s;
    --x-timing: cubic-bezier(.59,-0.75,.91,.5);
    --y-timing: cubic-bezier(.15,.57,.9,1.05);
    --scale-timing: cubic-bezier(.85,.06,.97,1.01);
    --color-timing: cubic-bezier(.05,1.02,.97,1.01);
  }

  .cart-item {
    --delay: 0.1s;
    position: fixed;
    inset: 0;
    /* outline: 2px dashed hotpink; */
    display: grid;
    place-items: center;
    -webkit-animation-name: cart-x, cart-y;
            animation-name: cart-x, cart-y;
    -webkit-animation-duration: var(--speed), var(--speed);
            animation-duration: var(--speed), var(--speed);
    -webkit-animation-delay: var(--delay), var(--delay);
            animation-delay: var(--delay), var(--delay);
    -webkit-animation-timing-function: var(--x-timing), var(--y-timing);
            animation-timing-function: var(--x-timing), var(--y-timing);
    -webkit-animation-fill-mode: both, both;
            animation-fill-mode: both, both;
    animation-composition: accumulate;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    z-index: 99999999999;
    pointer-events: none;
    
    img {
      width: 100%;
      aspect-ratio: 1;
      -o-object-fit: cover;
         object-fit: cover;
      /* backdrop-filter: blur(6px) saturate(1.3) brightness(2.75); */
      -webkit-animation-name: cart-scale, cart-color;
              animation-name: cart-scale, cart-color;
      -webkit-animation-duration: var(--speed), var(--speed);
              animation-duration: var(--speed), var(--speed);
      -webkit-animation-delay: var(--delay), var(--delay);
              animation-delay: var(--delay), var(--delay);
      -webkit-animation-timing-function: var(--scale-timing), var(--color-timing);
              animation-timing-function: var(--scale-timing), var(--color-timing);
      -webkit-animation-fill-mode: both, both;
              animation-fill-mode: both, both;
    }
  }
  @-webkit-keyframes cart-color {
    to {
      background: light-dark(hsl(0 0% 80% / 0.8), hsl(0 0% 90% / 0.8));
      /* background: light-dark(hsl(0 0% 12% / 0.7), hsl(210 10% 90% / 0.7)); */
    }
  }
  @keyframes cart-color {
    to {
      background: light-dark(hsl(0 0% 80% / 0.8), hsl(0 0% 90% / 0.8));
      /* background: light-dark(hsl(0 0% 12% / 0.7), hsl(210 10% 90% / 0.7)); */
    }
  }
  @-webkit-keyframes cart-scale {
    to {
      width: 24px;
      border-radius: 50%;
    }
  }
  @keyframes cart-scale {
    to {
      width: 24px;
      border-radius: 50%;
    }
  }
  @-webkit-keyframes cart-x {
    to {
      translate: var(--x) 0;
    }
  }
  @keyframes cart-x {
    to {
      translate: var(--x) 0;
    }
  }
  /* @keyframes cart-y {
    to {
      transform: translateY(var(--y));
    }
  } */
  @-webkit-keyframes cart-y {
    to {
      translate: 0 var(--y);
    }
  }
  @keyframes cart-y {
    to {
      translate: 0 var(--y);
    }
  }
}

@layer sticky-surface {
  sticky-surface {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999999;
    will-change: transform;
    pointer-events: none;
    display: grid;
    transition: transform 0.26s ease-out;
    transition: transform 0.26s cubic-bezier(.55,0,.67,1);
    justify-content: center;
  }

  sticky-surface[start-hidden] {
    translate: 0 100%;
  }
  
  sticky-surface[aria-hidden=true] {
    transform: translat.........完整代码请登录后点击上方下载按钮下载查看