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=&#.........完整代码请登录后点击上方下载按钮下载查看