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