gsap+svg实现拖动放大滑块特效代码-html代码-BFW代码库

gsap+svg实现拖动放大滑块特效代码

代码语言：html

所属分类：拖放

代码描述：gsap+svg实现拖动放大滑块特效代码

下面为部分代码预览，完整代码请点击下载或在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="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&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">

  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, explode;

@layer explode {
  .slider [type=range] {
    transition-property: filter, opacity, translate;
    transition-duration: 0.22s;
    transition-timing-function: ease-out;
  }
  .slider { touch-action: none; }
  [data-explode='true'] {
    .slider [type=range] {
      filter: blur(0);
      opacity: 1;
      translate: 0 100px;
    }
    .arrow {
      opacity: 0.7;
      filter: blur(0);
    }
  }
  body { overflow: hidden; }
  .arrow {
    opacity: 0;
    font-family: 'Gloria Hallelujah', cursive;
    font-size: 0.875rem;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    rotate: 10deg;
    filter: blur(4px);
    transition: opacity 0.22s ease-out, filter 0.22s ease-out;
    pointer-events: none;
    line-height: 1.5;
    translate: 150px 110px;

    span {
      white-space: nowrap;
    }
    svg {
      bottom: calc(100% + 10px);
      position: absolute;
      rotate: 86deg;
      translate: -50% 0;
      scale: -1 -1;
      left: 0;
      width: 60px;
    }
  }
}

@layer demo {
  .reference {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    width: 60px;
  }

  .slider {
    /* outline: 2px dashed red; */
    width: 260px;
    height: 44px;
    position: relative;
    opacity: 0;
  }
  .slider [type=range] {
    position: absolute;
    inset: 0;
    filter: blur(4px);
    opacity: 0;
    accent-color: canvasText;
  }
  .slider svg {
    width: 260px;
    position: absolute;
    top: 50%;
    left: 0;
    pointer-events: none;
    translate: 0 -50%;

    overflow: visible !important;
    
    .track {
      stroke: currentColor;
      stroke-width: 3px;
      stroke-dasharray: 0 15;
      stroke-dashoffset: -0.5;
      strok.........完整代码请登录后点击上方下载按钮下载查看