gsap+Draggable模仿苹果ios上下拖动音量亮度调节ui交互效果代码-html代码-BFW代码库

代码语言：html
所属分类：拖放
代码描述：gsap+Draggable模仿苹果ios上下拖动音量亮度调节ui交互效果代码
代码标签： gsap Draggable 模仿苹果 ios 上下拖动音量亮度调节 ui 交互
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
@import 'normalize.css' layer(normalize);

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark only;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 4%);
}

body::before {
  --size: 45px;
  --line: color-mix(in lch, canvasText, transparent 80%);
  content: '';
  height: 100vh;
  width: 100vw;
  position: fixed;
  background: linear-gradient(
        90deg,
        var(--line) 1px,
        transparent 1px var(--size)
      )
      50% 50% / var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
      var(--size) var(--size);
  -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
          mask: linear-gradient(-20deg, transparent 50%, white);
  top: 0;
  transform-style: flat;
  pointer-events: none;
  z-index: -1;
}

main {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--slider-height) * 1px));
  gap: 2rem;
}

.bear-link {
  color: canvasText;
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 48px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0.8;
}

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
  opacity: 1;
}

.bear-link svg {
  width: 75%;
}

@layer slider {
  .slider {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0 auto;
  }

  .slider label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .slider:focus-within,
  .slider:hover {
    --active: 1;
  }

  .slider:has(:focus-visible) {
    outline: 2px solid canvasText;
    outline-offset: 4px;
  }

  .slider [type='range'] {
    width: calc(var(--slider-width) * 1px);
    opacity: 0;
    height: calc(var(--slider-height) * 1px);
  }

  .slider [type='range']:hover {
    cursor: -webkit-grab;
  }

  .slider [type='range']:active {
    cursor: -webkit-grabbing;
  }

  .slider [type='range']:focus-visible {
    outline-offset: 0.25rem;
    outline-color: transparent;
  }

  .slider [type='range']::-webkit-slider-thumb {
    /*     appearance: none; */
    /*     -webkit-appearance: none; */
    height: calc(var(--slider-height) * 1px);
    width: 48px;
    margin-top: 0px;
    opacity: 1;
  }

  .slider [type='range']::-webkit-slider-runnable-track {
    /*   	-webkit-appearance: none; */
    height: calc(var(--slider-height) * 1px);
    background: hsl(10 0% 50% / 0.5);
    /* You need to specify a margin in Chrome */
    /* In Firefox and IE it is automatic */
    /* 	  margin-top: calc(var(--slider-height) * -0.5px); */
  }

  .slider [type='range']::-moz-range-track {
    height: calc(var(--slider-height) * 1px);
    background: hsl(10 0% 50% / 0.5);
    /* 	  margin-top: calc(var(--slider-height) * -0.5px); */
    /* You need to specify a margin in Chrome */
    /* In Firefox and IE it is automatic */
  }

  @supports (animation-timeline: scroll()) {
    @property --slider-complete {
      initial-value: 0;
      syntax: '<number>';
      inherits: true;
    }

    @-webkit-keyframes sync {
      to {
        --slider-complete: 1;
      }
    }

    @keyframes sync {
      to {
        --slider-complete: 1;
      }
    }

    .slider-wrap {
      timeline-scope: --thumb;
      animation: sync both linear reverse;
      animation-timeline: --thumb;
      animation-range: contain;
    }

    .slider [type='range']::-webkit-slider-thumb {
      view-timeline-name: --thumb;
      view-timeline-axis: inline;
    }
  }
}

@layer sliders {
  :root {
    --slider-radius: 16;
    --slider-height: 96;
    --slider-width: 214;
    --transition: 0.4s;
    --spring: linear(
      0 0%,
      0.5258 3.83%,
      0.9015 8.01%,
      1.0369 10.27%,
      1.1399 12.68%,
      1.2124 15.28%,
      1.2563 18.13%,
      1.2683 19.76%,
      1.2731 21.51%,
      1.2706 23.41%,
      1.2609 25.51%,
      1.2318 29.22%,
      1.1328 39.11%,
      1.0859 44.55%,
      1.0464 50.71%,
      1.0195 57.21%,
      1.004 63.99%,
      0.9963 72.12%,
      0.9953 83.93%,
      1 100%
    );
    --timing: linear(
      0 0%,
      0.4322 6.7%,
      0.5876 9.63%,
      0.7165 12.53%,
      0.8238 15.53%,
      0.9087 18.63%,
      0.9731 21.89%,
      1.0188 25.4%,
      1.0377 27.67%,
      1.0507 30.11%,
      1.058 32.77%,
      1.0598 35.74%,
      1.0528 41.1%,
      1.0164 56.54%,
      1.004 65.49%,
      0.998 78.52%,
      1 100%
    );
  }

  .slider {
    translate: 0 0;
    width: calc(var(--slider-width) * 1px);
    height: calc(var(--slider-height) * 1px);
    overflow: hidden;
    border-radius: calc(var(--slider-radius) * 1px);
  }

  /* Handling the sun */
  .slider--brightness .slider__indicator {
    pointer-events: none;
    height: 50%;
    aspect-ratio: 1;
    position: absolute;
    left: 12%;
    top: 50%;
    translate: 0 -50%;
    color: hsl(
      45 calc((0 + (var(--slider-complete) * 150)) * 1%)
        clamp(40%, (80 - (var(--slider-complete) * 40)) * 1%, 80%)
    );
    transition: color var(--transition);
    transition-timing-function: var(--timing);
    z-index: 20;
  }

  .slider--brightness .slider__indicator svg {
    scale: clamp(1, (1.75 - (1 * (var(--slider-complete) * 4))), 1.75);
    transition: scale var(--transition);
    transition-timing-function: var(--timing);
  }

  .slider--brightness .slider__indicator svg > path:first-of-type {
    transform-box: fill-box;
    transform-origin: center;
    opacity: clamp(0, calc((var(--slider-complete) * 2) - 0.125), 1);
    scale: clamp(0, calc((var(--slider-complete) * 2) - 0.125), 1);
    transition: opacity var(--transition), scale var(--transition);
    transition-timing-function: var(--timing);
  }

  .slider--brightness .slider__indicator #cut-out path {
    transform-box: fill-box;
    transform-origin: center center;
    translate: calc((25 + (var(--slider-complete) * 200)) * 1%)
      calc((25 + (var(--slider-complete) * 200)) * 1%);
    transition: translate var(--transition);
    transition-timing-function: var(--timing);
  }

  /* Handling the volume */
  .slider--volume .slider__indicator {
    pointer-events: none;
    height: 35%;
    aspect-ratio: 1;
    position: absolute;
    left: 16%;
    top: 50%;
    translate: 0 -50%;
    rotate: 90deg;
    color: hsl(
      190 calc((0 + (var(--slider-complete) * 150)) * 1%)
        clamp(40%, (80 - (var(--slider-complete) * 40)) * 1%, 80%)
    );
    transition: color var(--transition);
    transition-timing-function: var(--timing);
    z-index: 20;
  }

  /* Muted */
  .slider--volume .slider__indicator path:nth-of-type(3) {
    transform-box: fill-box;
    transform-origin: center;
    translate: 25% 0;
    scale: clamp(0, 1.25 - (var(--slider-complete) * 100), 2);
    transition: scale var(--transition) var(--timing);
  }

  /* Should come in at 25% and 75% */
  .slider--volume .slider__indicator path:nth-of-type(2) {
    transform-box: fill-box;
    transform-origin: center;
    translate: 25% 0;
    opacity: clamp(0, ((var(--slider-complete) - 0.25) * 100), 2);
    transition: opacity var(--transition) var(--timing);
  }

  .slider--volume .slider__indicator path:nth-of-type(4) {
    transform-box: fill-box;
    transform-origin: center;
    translate: 25% 0;
    opacity: clamp(0, ((var(--slider-complete) - 0.75) * 100), 2);
    transition: opacity var(--transition) var(--timing);
  }

  /* Handling the Intensity */
  .slider--intensity .slider__indicator {
    pointer-events: none;
    height: 50%;
    aspect-ratio: 1;
    position: absolute;
    left: 14%;
    top: 50%;
    translate: 0 -50%;
    rotate: 90deg;
    transition-timing-function: var(--timing);
    z-index: 20;
  }

  .slider--intensity .slider__indicator svg {
    overflow: visible !important;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .slider--intensity .slider__indicator g {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transform: scale(calc(1.5 - (var(--slider-complete) * 0.5)));
  }

  .slider--intensity .slider__indicator path:nth-of-type(1) {
    color: hsl(0 0% clamp(50%, (var(--slider-complete) * 100) * 1%, 100%));
  }

  .slider--intensity .slider__indicator path:nth-of-type(2) {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    scale: var(--slider-complete);
    opacity: var(--slider-complete);
  }
}

div.tp-dfwv {
  width: 280px;
}

[data-disguise='false'] {
  .slider__track,
  .slider__indicator {
    display: none;
  }

  .slider {
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    display: flex;
    gap: 1rem;

    label {
      position: static;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip: unset;
      white-space: nowrap;
      border-width: 0;
      font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
        'Helvetica Neue', sans-serif;
    }

    input {
      opacity: 1;
      width: 100%;
    }

    [type='range']::-webkit-slider-thumb {
      height: auto;
      width: auto;
    }

    [type='range']::-webkit-slider-runnable-track {
      background: transparent;
      height: auto;
    }

    [type='range']::-moz-range-track {
      background: transparent;
      height: auto;
    }
  }
}

[data-spring='true'] .track {
  transition: scale var(--spring) 0.625s;
}

[data-spring='true'] .slider__indicator {
  transition: transform var(--spring) 0.625s;
}

[data-origin='bottom'] :is(.track) {
  transform-origin: 0 50%;
}
[data-origin='top'] :is(.track) {
  transform-origin: 100% 50%;
}
[data-enhance='true'] :is(.track) {
  scale: calc(1 + (clamp(0, var(--stretch), 1) * var(--stretch-ratio, 0.2)))
    calc(1 - (clamp(0, var(--stretch), 1) * (var(--stretch-ratio, 0.2) * 0.5)));
  /* transition: all 0.2s; */
}

.container {
  position: relative;
}

.slider-wrap {
  position: absolute;
  timeline-scope: --thumb;
  height: calc(var(--slider-height) * 1px);
  width: calc(var(--slider-width) * 1px);
  rotate: -90deg;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

[data-enhance='true'] .slider__indicator {
  transform: scale(
    calc(1 + clamp(0, var(--stretch), 1) * var(--stretch-ratio, 0.2))
  );
}

.slider__track {
  background: color-mix(in lch, canvasText, canvas 80%);
  pointer-events: none;
  height: calc(var(--slider-height) * 1px);
  width: calc(var(--slider-width) * 1px);
  position: absolute;
  inset: 0;
  border-radius: calc(var(--slider-radius) * 1px);
  -webkit-clip-path: inset(0 0 0 0 round calc(var(--slider-radius) * 1px));
          clip-path: inset(0 0 0 0 round calc(var(--slider-radius) * 1px));
  --perfect-shadow: 0px 0px 0px 1px hsl(0 0% 0%),
    -9px 9px 9px -0.5px hsl(0 0% 0% / 0.5),
    -18px 18px 18px -1.5px hsl(0 0% 0% / 0.5),
    -37px 37px 37px -3px hsl(0 0% 0% / 0.5),
    -75px 75px 75px -6px hsl(0 0% 0% / 0.5),
    -150px 150px 150px -12px hsl(0 0% 0% / 0.5);
  box-shadow: var(--perfect-shadow);
}

.track__progress {
  width: 100%;
  height: 100%;
  background: color-mix(
    in lch,
    canvasText,
    canvas clamp(50%, (70 - (var(--slider-complete) * 20)) * 1%, 70%)
  );
  transform-origin: 0 50%;
  scale: var(--slider-complete) 1;
  transition: scale var(--transition), background var(--transition);
  transition-timing-function: var(--timing);
  z-index: -1;
}
</style>


  
  
</head>

<body translate="no">
  <a
      class="bear-link"
      href=""
      target="_blank"
      rel="noreferrer noopener"
    >
     LOGO
    </a>
    <main>
      <div class="container">
        <div class="slider-wrap">
          <div class="slider__track track">
            <div class="track__progress"></div>
          </div>
          <div class="slider slider--brightness">
            <label for="brightness" class="sr-only">Brightness</label>
            <input id="brightness" type="range" min="0" max="100" value="86" />
            <div class="slider__indicator">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <mask id="cut-out">
                    <rect width="100%" height="100%" fill="white"/>
                    <path
                      d="M7.5 12C7.5 10.8065 7.97411 9.66193 8.81802 8.81802C9.66193 7.97411 10.8065 7.5 12 7.5C13.1935 7.5 14.3381 7.97411 15.182 8.81802C16.0259 9.66193 16.5 10.8065 16.5 12C16.5 13.1935 16.0259 14.3381 15.182 15.182C14.3381 16.0259 13.1935 16.5 12 16.5C10.8065 16.5 9.66193 16.0259 8.81802 15.182C7.97411 14.3381 7.5 13.1935 7.5 12Z"
                      fill="black"
                    />
                  </clipPath>
                </defs>
                <path
                  d="M12 2.25C12.1989 2.25 12.3897 2.32902 12.5303 2.46967C12.671 2.61032 12.75 2.80109 12.75 3V5.25C12.75 5.44891 12.671 5.63968 12.5303 5.78033C12.3897 5.92098 12.1989 6 12 6C11.8011 6 11.6103 5.92098 11.4697 5.78033C11.329 5.63968 11.25 5.44891 11.25 5.25V3C11.25 2.80109 11.329 2.61032 11.4697 2.46967C11.6103 .........完整代码请登录后点击上方下载按钮下载查看