gsap+svg实现可配置参数的添加购物车按钮动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap+svg实现可配置参数的添加购物车按钮动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, prototype, testing, motion;

@layer motion {
  :root {
    --text-speed: 0.26;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.12;
    --ring-speed: 0.2;
    --check-speed: 0.1;
    --burst-speed: 0.32;
    --step-delay: 4;
  }
  .playground {
    --base-delay: 0;
  }
  .playground[data-play='true'],
  [data-adding="true"] {
    .check {
      transition-property: opacity, scale, filter;
      transition-duration: calc(calc(var(--check-speed) * 1s) * var(--speed));
      transition-delay: calc((var(--base-delay) * 1s) * var(--speed));
      transition-timing-function: ease-in-out;
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }
    .tick {
      scale: 1.5;
      transition-property: scale;
      transition-duration: calc((calc(var(--tick-speed) * 1s)) * var(--speed));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s) * var(--speed));
      transition-timing-function: ease-out;
    }
    .ring {
      transition-property: opacity, scale, filter;
      transition-duration: calc((calc(var(--ring-speed) * 1s)) * var(--speed));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s) * var(--speed));
      transition-timing-function: ease-in-out; 
      opacity: 0;
      scale: 1;
      filter: blur(1px);
    }
    :is(.wiggle, .line) {
      transition-property: stroke-dashoffset;
      transition-duration: calc((calc(var(--burst-speed) * 1s)) * var(--speed));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s) * var(--speed));
      transition-timing-function: ease-out;
      stroke-dashoffset: 1.5;
    }
  }
  .add-to-cart-text {
    clip-path: circle(100% at 50% 50%);
    transition-property: clip-path, opacity, filter, translate;
    transition-duration: calc((var(--text-speed) * 0.6s) * var(--speed)), calc((var(--text-speed) * 1s) * var(--speed));
    transition-timing-function: ease-out;
  }
  [data-adding='true'] .add-to-cart-text {
    clip-path: circle(0% at 50% 50%);
    filter: blur(2px);
    opacity: 0;
    translate: 0 4px;
  }
  [data-timing='random'] :is(.playground[data-play='true'],[data-adding="true"]) .burst :is(.wiggle, .line) {
    transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay)) + (var(--d))) * 1s) * var(--speed));
  }
  [data-timing='sequential'] :is(.playground[data-play='true'],[data-adding="true"]) .burst :is(.wiggle, .line) {
    transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay)) + (var(--index) * 0.05)) * 1s) * var(--speed));
  }
  [data-timing='alternate'] :is(.playground[data-play='true'],[data-adding="true"]) .burst g:nth-of-type(odd) { --alt-d: 0.1; }
  [data-timing='alternate'] :is(.playground[data-play='true'],[data-adding="true"]) .burst g:nth-of-type(even) { --alt-d: 0; }
  [data-timing='alternate'] :is(.playground[data-play='true'],[data-adding="true"]) .burst :is(.wiggle, .line) {
    transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay)) + (var(--alt-d))) * 1s) * var(--speed));
  }
}

@layer testing {
  
  [data-play='true'] .playground {
    display: block;
  }
  .playground {
    width: 100%;
    color: canvas;
    display: none;

    fieldset {
      padding: 2rem;
      display: grid;
      place-items: center;
      position: relative;
      border: 0;
    }
    fieldset legend {
      position: absolute;
      top: 4px;
      left: 6px;
      color: rgba(187, 188, 196, 0.7)
      
    }
    fieldset svg {
      width: 100px;
    }
    
    
  }
  .checkmark-burst {
    overflow: visible !important;

    .burst {
      rotate: 20deg;
    }
    .check {
      opacity: 0.2;
      scale: 0.3;
      filter: blur(2px);
    }
    :is(.ring, .wiggle, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }
    :is(.wiggle, .line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }
    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  [data-color='vibrant'] .checkmark-burst g {
    color: var(--color, currentColor);
  }
  
  [data-style='wiggle'] .checkmark-burst .line,
  [data-style='line'] .checkmark-burst .wiggle,
  [data-style='alternate'] .checkmark-burst .burst g:nth-.........完整代码请登录后点击上方下载按钮下载查看