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

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

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