tweakpane实现可配置参数的小球拖拽滚动显示文字印记痕迹效果代码-html代码-BFW代码库

tweakpane实现可配置参数的小球拖拽滚动显示文字印记痕迹效果代码

代码语言：html

所属分类：拖放

代码描述：tweakpane实现可配置参数的小球拖拽滚动显示文字印记痕迹效果代码

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

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

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

  
  
  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);
/* @import 'normalize.css' layer(normalize); */
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Grand+Hotel&display=swap');

@layer normalize, base, demo, slider, animation, debug;

@layer debug {
  :root {
    --accent: oklch(0.72 0.28 349.83);
    --size: 182%;
  }

  .instruction {
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: 'Gloria Hallelujah', cursive;
    translate: -100px 40%;
    color: color-mix(in lch, canvas, canvasText 80%);

    @media (min-width: 768px) {
      translate: -200px 20%;
    }

    span {
      display: inline-block;
      translate: -50% 15%;
      rotate: 10deg;
    }
  }

  .test-stack {
    height: 20vmin;
    aspect-ratio: 1;
    outline-offset: 4px;
    outline: 2px dashed var(--accent);
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: calc(100% + 4rem);
    /* translate: 0 -50%; */
    opacity: 0;
    transition: opacity var(--transition) var(--ease);
    display: grid;
    pointer-events: none;

    div {
      grid-area: 1 / 1;
    }

    div:nth-of-type(1) {
      background: black;
      filter: url(#noiseshow) contrast(2);
    }
    div:nth-of-type(2) {
      background: hsl(0 0% 50%);
      mix-blend-mode: saturation;
    }
  }

  .noise-holder {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle at 50% 40%, #0000 0%, #fff 75%);
            mask: radial-gradient(circle at 50% 40%, #0000 0%, #fff 75%);
    pointer-events: none;
  }
  .noise {
    height: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    left: 50%;
    position: absolute;
    translate: -50% 0;
    display: grid;
    opacity: 0.3;

    div {
      grid-area: 1 / 1;
    }

    div:nth-of-type(1) {
      background: black;
      filter: url(#noiseshow) contrast(2);
    }
    div:nth-of-type(2) {
      background: hsl(0 0% 50%);
      mix-blend-mode: saturation;
    }
  }

  [data-reveal='true'] .test-stack {
    opacity: 1;
  }

  .arrows-holder {
    -webkit-clip-path: circle(50%);
            clip-path: circle(50%);
  }
  [data-reveal='true'] .arrows-holder {
    -webkit-clip-path: circle(250%);
            clip-path: circle(250%);
    -webkit-mask: unset;
            mask: unset;
  }

  [data-reveal='true'] .slider input {
    opacity: 1;
    translate: 0 -150%;
    outline-color: var(--accent);
    background: color-mix(in oklch, var(--accent), #0000);
  }

  .slider input {
    outline: 2px dashed #0000;
    transition-property: opacity, outline-color, background, translate;
    transition-duration: 0.5s;
  }

  .slider [type='range']::-webkit-slider-runnable-track {
    height: 100%;
    width: 100%;
    background: color-mix(in oklch, var(--accent), #0000 75%);
  }

  .slider [type='range']::-moz-range-track {
    height: 100%;
    width: 100%;
    background: color-mix(in oklch, var(--accent), #0000 75%);
  }

  .slider ::-webkit-slider-thumb {
    width: var(--height);
    height: var(--height);
  }

  .slider ::-moz-range-thumb {
    width: var(--height);
    height: var(--height);
  }
}

@layer animation {
  :root {
    @media (hover: hover) {
      --transition: 0.625s;
      --ease: linear(
        0 0%,
        0.5007 7.21%,
        0.7803 12.29%,
        0.8883 14.93%,
        0.9724 17.63%,
        1.0343 20.44%,
        1.0754 23.44%,
        1.0898 25.22%,
        1.0984 27.11%,
        1.1014 29.15%,
        1.0989 31.4%,
        1.0854 35.23%,
        1.0196 48.86%,
        1.0043 54.06%,
        0.9956 59.6%,
        0.9925 68.11%,
        1 100%
      );
    }
    /* --transition: 0s;
    --ease: ease; */
  }
  @property --slider-complete {
    initial-v.........完整代码请登录后点击上方下载按钮下载查看