confetti实现canvas彩色纸屑粒子喷射动画效果合集示例代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：confetti实现canvas彩色纸屑粒子喷射动画效果合集示例代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>🎊</title>

  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">

  <style>
    :root {
      --primary-color: #eeeeee;
      --secondary-color: #363636;
      --secondary-variant-color: #272727;
      --background-color: #212121;
      --inner-color: #ffffff;
      --border-color: #555651;

      /* icons by Google - Material Design
       * https://material.io/resources/icons/?style=baseline
       */
      --switch-moon-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23eeeeee' d='M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6c3.31 0 6 2.69 6 6s-2.69 6-6 6z'%3E%3C/path%3E%3C/svg%3E");
      --switch-sun-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23212121' d='M20 15.31L23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z'%3E%3C/path%3E%3C/svg%3E");
      --switch-auto-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23eeeeee' d='M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM14.3 16l-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9z'%3E%3C/path%3E%3C/svg%3E");
      --switch-auto-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23212121' d='M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM14.3 16l-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9z'%3E%3C/path%3E%3C/svg%3E");

      --theme-switch: var(--switch-moon-white);
    }

    [data-theme="light"] {
      --primary-color: #212121;
      --secondary-color: #ffffff;
      --background-color: #f0f0f0;
      --inner-color: #363636;

      --theme-switch: var(--switch-sun-black);
    }

    [auto-theme] {
      --theme-switch: var(--switch-auto-white);
    }

    [data-theme="light"][auto-theme] {
      --theme-switch: var(--switch-auto-black);
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    body {
      background: var(--background-color);
      color: var(--primary-color);
      font-size: 1em;
      font-family: 'Noto Sans', sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    .sprite {
      display: none;
    }

    header {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      height: 64px;
    }

    .theme {
      --size: 28px;
      position: relative;
      display: inline-block;
      width: var(--size);
      height: var(--size);
      background: none;
      border: none;
      outline: none;
      margin-right: 12px;
      cursor: pointer;
    }

    .theme:after {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: var(--size);
      height: var(--size);
      background-repeat: no-repeat;
      background-position: center;
      background: var(--theme-switch);
    }

    .github-icon {
      --size: 36px;
      position: relative;
      display: block;
      width: var(--size);
      height: var(--size);
      margin-right: 12px;
    }

    .github-icon svg.icon {
      fill: var(--primary-color);
    }

    h1, h2, .center {
      text-align: center;
    }

    h1 {
      margin-top: 64px;
    }

    h2 {
      padding: 0;
      margin: 0.25em;
    }

    p {
      margin: 0.5em;
    }

    .container {
      position: relative;
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
    }

    .group {
      position: relative;
      width: 100%;
      margin: 40px 0;
      padding-top: 16px;

      border-top: 1px solid var(--border-color);
      border-radius: 20px;
    }

    .run {
      padding: 10px 6px;
      margin: 0.75em auto;
      max-width: 200px;
      width: 100%;
      display: inline-block;

      background: var(--secondary-color);
      border: none;
      outline: none;

      color: var(--inner-color);
      font-weight: bold;
      cursor: pointer;
      user-select: none;

      opacity: 0.8;
      transition: opacity 100ms ease;
    }

    .group .run:hover {
      opacity: 1;
    }

    .editor {
      position: relative;
      min-height: 100px;
      width: 100%;
    }

    .editor.ace_dark.ace_editor {
      background-color: var(--secondary-color);
    }
    .editor.ace_dark .ace_gutter {
      background: var(--secondary-variant-color);
    }
    .editor.ace_dark .ace_gutter .ace_gutter-cell {
      color: var(--inner-color);
      opacity: 0.6;
    }

    .flex-rows {
      position: relative;
      display: block;
      width: 100%;
      padding-bottom: 1em;
    }

    .description {
      width: 94%;
      margin: 10px auto;
      padding: 0;

      align-items: center;
      line-height: 1.5;
    }

    .left {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    a.anchor {
      position: relative;
      color: currentColor;
      text-decoration: none;
    }

    a.anchor:hover::before {
      content: "🔗";
      color: currentColor;
      position: absolute;
      left: -2rem;
      top: 0;
      transform: scale(0.75, 0.75);
    }

    footer {
      font-size: 0.9rem;
      text-align: center;
      line-height: 2;

      background: var(--secondary-color);
    }

    footer span {
      vertical-align: middle;
    }

    span.icon {
      position: relative;
      display: inline-block;
      height: 1em;
      width: 1em;
    }
    svg.icon {
      position: absolute;
      pointer-events: none;
      left: 0;
      width: 100%;
      height: 100%;

      fill: var(--inner-color);
    }

    footer a {
      text-decoration: none;
      color: var(--inner-color);
      opacity: 0.85;
      will-change: opacity;
    }

    footer a:hover {
      opacity: 1;
    }

    .custom-canvas {
      margin-top: 30px;
      width: 100%;
      max-width: 1000px;
      height: 380px;
      background: var(--secondary-color);
    }

    @media (min-width: 44em) {
      .container {
        width: 95%;
      }

      .flex-rows {
        display: flex;
        flex-direction: row;
      }

      .description {
        width: 66%;
        padding: 0 0 0 1em;
      }
    }
  </style>

  <script>
    // this page is a demo that is not built, so fudge the module.exports support
    // define a global `module` so that the actual source file can use it
    window.module = {};
  </script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/confetti.js"></script>
  <script>
    // define the `module.exports` as the `confetti` global, the way that the
    // cdn distributed file would
    window.confetti = module.exports;
  </script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ace/ace.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/beautify.js"></script>
</head>
<body>

  <svg class="sprite" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <symbol id="code" viewBox="0 0 14 16">
        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->
        <path d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3 9.5 3ZM4.5 3L0 8 4.5 13 6 11.5 2.5 8 6 4.5 4.5 3 4.5 3Z"/>
      </symbol>

      <symbol id="heart" viewBox="0 0 12 16">
        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->
        <path d="M11.2 3C10.68 2.37 9.95 2.05 9 2 8.03 2 7.31 2.42 6.8 3 6.29 3.58 6.02 3.92 6 4 5.98 3.92 5.72 3.58 5.2 3 4.68 2.42 4.03 2 3 2 2.05 2.05 1.31 2.38 0.8 3 0.28 3.61 0.02 4.28 0 5 0 5.52 0.09 6.52 0.67 7.67 1.25 8.82 3.01 10.61 6 13 8.98 10.61 10.77 8.83 11.34 7.67 11.91 6.51 12 5.5 12 5 11.98 4.28 11.72 3.61 11.2 2.98L11.2 3Z"/>
      </symbol>

      <symbol id="run" viewBox="0 0 10 10">
        <path d="M2 2L8 6L2 10" />
      </symbol>

      <symbol id="octo" viewBox="0 0 16 16">
        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->
        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
      </symbol>
    </defs>
  </svg>

  <header>
    <button id="themeToggle" title="Switch Theme" class="theme"></button>
    <a class="github-icon" title="Visit on GitHub" href="https://github.com/catdad/canvas-confetti" aria-label="View source on Github">
      <svg class="icon"><use xlink:href="#octo"></use></svg>
    </a>
  </header>

  <h1>Canvas Confetti</h1>

  <div class="container">
    <div class="group" data-name="cannon">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#basic" id="basic" class="anchor">Basic Cannon</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            The default mode... just your regular basic average blast of confetti. But it's still
            a little cool, right?
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="random">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#random" id="random" class="anchor">Random Direction</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            Go crazy with some randomness. Shoot a random amount of confetti in random directions.
            (Go ahead... you know you want to click that button more than once.)
          </p>
        </div>
      </div>
      <div class="editor"></div>
    </div>
  </div>

  <div class="container">
    <div class="group" data-name="realistic">
      <div class="flex-rows">
        <div class="left">
          <h2><a href="#realistic" id="realistic" class="anchor">Realistic Look</a></h2>
          <button class="run">
            Run
            <span class="icon">
              <svg class="icon"><use xlink:href="#run"></use></svg>
            </span>
          </button>
        </div>
        <div class="description">
          <p>
            If you happened to get curious and changed the particle count to 400 or so, you saw
            something disappointing. An even &q.........完整代码请登录后点击上方下载按钮下载查看