gsap+shiki+matter实现代码点击自由落体闪落一地动画效果代码-html代码-BFW代码库

gsap+shiki+matter实现代码点击自由落体闪落一地动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+shiki+matter实现代码点击自由落体闪落一地动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
<style>
@import url("//repo.bfw.wiki/bfwrepo/css/normalize.min.css") layer(normalize);

@layer normalize, base, demo;

@layer demo {
  @counter-style pad-example {
    system: extends decimal;
    suffix: ' ';
    pad: 2 ' ';
  }
  main pre {
    margin: 0;
    counter-set: line;
    padding: 1.2rem;
    font-size: 0.875rem;
    background: black !important;
    filter: grayscale(1);
    margin: 0;
  }
  main {
    position: relative;
  }

  main:not([data-active='true']) {
    cursor: not-allowed;
  }

  code {
    background: black;
    display: flex;
    flex-direction: column;
  }
  [data-active='true'] .character {
    cursor: -webkit-grab;
  }
  [data-active='true'] .character:active {
    cursor: -webkit-grabbing;
  }

  [data-active='false'] .character {
    transition: translate calc(var(--speed) * 1s) calc(var(--delay) * 1s);
  }
  .character {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: inline-block;
    height: 100%;
    translate: calc(var(--tx, 0) * 1px) calc(var(--ty, 0) * 1px);
  }
  .line {
    display: list-item;
    list-style: pad-example;
    list-style-position: inside;
  }
  .line::marker {
    color: hsl(0 0% 50% / 0.5);
    font-family: monospace;
  }
  body {
    overflow: hidden;
  }
  .ground {
    position: fixed;
    bottom: 0;
    height: 100px;
    width: 100vw;
    background: red;
    opacity: 0.2;
  }
}

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

  html {
    color-scheme: light dark;
  }

  [data-theme='light'] {
    color-scheme: light only;
  }

  [data-theme='dark'] {
    color-scheme: dark only;
  }

  :where(.fluid) {
    --fluid-mi.........完整代码请登录后点击上方下载按钮下载查看