用CSS制作有趣的派对礼炮加载动画

加载动画和效果在提高网站用户体验方面扮演着重要角色。它们不仅提供视觉反馈信息，还让等待过程更有趣。其中一个有趣的动画是 CSS Party Popper Loader 这样的动画，它增添了一种欢乐的节日氛围。在这篇文章里，我们将来看看它是如何运作的，还有如何实现和自定义。

……

为什么要用动画加载器呢？

一个精心设计的 CSS 动画有几个用途：

• 用户参与度：当用户看到有趣的动画时，他们更可能保持愉快，而不是感到沮丧。
• 品牌和视觉吸引力：自定义加载动画可以更好地与您的品牌形象保持一致。
• 性能优化：纯 CSS 动画无需 JavaScript，使其更轻量且更快。

这款派对礼炮动画加载工具提供独特且引人注目的动画，非常适合庆祝主题的网站、活动或特殊场合。

此处省略部分内容。

理解“party popper”动画

CSS Party Popper 包含不同的元素，共同营造出活泼的效果：

1. Popper 主体：锥形代表了派炮的主要部分。
2. 派炮头部：一个圆形的头部，看上去是派炮的顶端部分。
3. 彩纸元素：这些小的装饰品让派炮看起来更具有节日气氛。

我们来看看这个动画的HTML和CSS结构是怎么样的。

……

HTML

    <div class="party" title=":party:">
      <a title=":聚会:">
        <ul>
          <li>活动1</li>
          <li>活动2</li>
          <li>活动3</li>
          <li>活动4</li>
        </ul>
      </a>
    </div>

全屏模式 / 退出全屏

• <div class="party"> 用于包装动画。
• 它里面有一个锚点（<a>）元素，用于提高可访问性。
• 一个无序列表（<ul>）包含四个列表项（<li>）元素，来代表动画的不同部分。

……

CSS 实现方案

基本样式设计

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
      color: inherit;
      outline: none;
      font-weight: inherit;
      font-size: 1em;
    }

全屏 退出

这确保了所有元素的盒模型设置一致，并移除了不必要的样式。

先设定一下背景

    body {
      background-color: #3D3E6F;
    }

下面的代码将设置body的背景颜色为深紫色。

全屏查看 退出全屏

这给加载界面赋予了深蓝紫色的背景，使弹出框中的颜色更加醒目。

定位加载器的位置

    .party {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 48px;
      height: 48px;
      /* .party 样式定义了一个绝对定位的元素，位于页面中心，宽高为48像素 */
    }

进入全屏 退出全屏模式

把动画放在屏幕中央。

为 Popper 体添加动画效果

    .party:before {
      content: "";
      border-right: 24px solid transparent;
      border-bottom: 24px solid #B4B4F3;
      border-left: 24px solid transparent;
      width: 48px;
      height: 48px;
      animation: party-body 0.5s linear infinite;
    }

进入全屏，退出全屏

border属性使弹出层呈现三角形。animation属性循环变化不同的颜色和形状。

弹跳身体动画的关键帧动画

    @keyframes party-body {
      0%, 100% {
        border-right-width: 24px;
        border-left-width: 24px;
        border-bottom-color: #B4B4F3;
      }
      25% {
        border-right-width: 44px;
        border-left-width: 4px;
        border-bottom-color: #70EEFA;
      }
      50% {
        border-right-width: 24px;
        border-left-width: 24px;
        border-bottom-color: #A7F9E3;
      }
      75% {
        border-right-width: 12px;
        border-left-width: 36px;
        border-bottom-color: #FF6270;
      }
    }

全屏 / 退出全屏

这平滑地转变了弹出框的形状和颜色，以创造出动态效果。

制作动画：聚会头

    .party ul {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #7272E9;
      position: absolute;
      top: 0;
      left: 8px;
      animation-name: party-head;
    }

全屏模式 退出全屏

border-radius: 50% 使头呈圆形，并且 animation-name: party-head 使头弹跳起来。

@keyframes party-head {
  0%, 100% {
    transform: translate(0%, 0%) rotate(0deg);
    /* 在0%和100%时，背景颜色为#7272E9，元素不旋转也不移动。 */
    background: #7272E9;
  }
  25% {
    transform: translate(-37.5%, 12.5%) rotate(22.5deg);
    /* 在25%时，背景颜色变为#51CFDB，元素旋转22.5度并向左下移动。 */
    background: #51CFDB;
  }
  50% {
    transform: translate(0%, 25%);
    /* 在50%时，背景颜色为#3AD4AC，元素向上移动25%。 */
    background: #3AD4AC;
  }
  75% {
    transform: translate(25%, 12.5%) rotate(-11.25deg);
    /* 在75%时，背景颜色变为#E04351，元素旋转-11.25度并向右下移动。 */
    background: #E04351;
  }
}

全屏模式：进入，退出

这使得头上下移动并变色。

彩纸屑喷泉动画

    @keyframes party-plume {
      0%, 100% {
        border-left-color: #3DF2C2; /* 0% 和 100% 时，左边界颜色为 #3DF2C2 */
      }
      25% {
        border-left-color: #7272E9; /* 25% 时，左边界颜色为 #7272E9 */
      }
      50% {
        border-left-color: #FF479E; /* 50% 时，左边界颜色为 #FF479E */
      }
      75% {
        border-left-color: #FF8C62; /* 75% 时，左边界颜色为 #FF8C62 */
      }
    }
    /* 党派羽饰动画 */

请切换到全屏模式 请退出全屏

这段动画改变了彩屑喷泉的颜色，为爆裂效果增添了更多的乐趣和兴奋。

此处省略内容

定制主意

你可以通过修改加载器的代码、配置或参数等方式来修改加载器。

• 调整动画速度（如调整 animation-duration 值）
• 使用不同的颜色

• 添加更多的彩纸屑

• • *

一些最后的想法

这个CSS Party Popper Loader加载器是一款很棒的工具，可以让你的网站更有趣、更吸引人。只需几行CSS，你就可以添加动态庆祝效果，从而提升用户体验感。试试看，调整样式，让它更符合你的喜好吧！

你有啥建议或个性化的想法或需求吗？在评论区留言告诉我们吧！

编码愉快！🎉