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