當談到運動和動畫時，可能沒有什麼比粒子更讓我喜歡了，這就是為什麼每次我探索新技術時，我總是以儘可能多的創建粒子來演示。

在本文中，單擊按鈕時，我們將使用Web Animations API創建煙花效果，從而製作更多的粒子魔術效果，跟著步驟動手，其實沒那麼難。本文案例效果如下

瀏覽器支持

在我撰寫本文時，除了Safari和Internet Explorer（IE是全民公敵、Safari是新時代的IE）之外，所有主流瀏覽器至少部分支持Web動畫API。Safari支持可以在“實驗性特性”開發人員菜單中啟用。

這個瀏覽器支持的數據來自Caniuse。數字表示瀏覽器支持該版本及以上的功能。

https://caniuse.com/

HTML設置

該演示不需要太多的HTML，我們將使用一個 <button> 元素，但它可以是另一種類型的標籤元素。如果我們真的想的話，我們甚至可以聽到頁面上的任何點擊聲，讓粒子從任何地方彈出。

<code><button>Click on me/<button>/<code>

CSS設置

由於每個粒子都有一些共同的CSS屬性，我們可以在頁面的全局CSS中設置它們。因為您可以在HTML中創建自定義標籤元素，所以我將使用 <particle> /<particle>標籤名稱來避免使用語義標籤。但事實是，您可以為

，

<code>particle {
  border-radius: 50%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
}/<code>

這裡要注意幾件事：

• 粒子不應與頁面佈局相互作用，因此我們設置了一個fixed定位，top和left分別為0px。
• 我們還將刪除指針事件，以避免HTML粒子在屏幕上時與用戶的任何交互。

因為樣式化按鈕和頁面佈局並不是本文的真正目的，所以我將把它放在一邊。

JavaScript設置

這是我們將在JavaScript中執行的六個步驟：

• 監聽按鈕上的點擊事件
• 創建30個<particle>元素並將其附加到/<particle>
• 為每個粒子設置隨機的寬度，高度和背景
• 使每個粒子淡出時，將其從鼠標位置動畫化到隨機位置
• 動畫完成後，從DOM中刪除<particle>

步驟1：點擊事件

<code>// 我們首先檢查瀏覽器是否支持Web Animations API
if (document.body.animate) {
  // 如果支持，我們在按鈕上添加一個點擊監聽器
  document.querySelector('#button').addEventListener('click', pop);
}/<code> 

步驟2：粒子

<code>// 每次點擊都會調用 pop() 函數
function pop(e) { 
  // 循環一次生成30個粒子
  for (let i = 0; i < 30; i++) {
    // 我們將鼠標座標傳遞給 createParticle() 函數
    createParticle(e.clientX, e.clientY);
  }
}
function createParticle(x, y) {
  // 創建自定義粒子元素
  const particle = document.createElement('particle');
  // 將元素添加道body中
  document.body.appendChild(particle);
}/<code>

步驟3：粒子寬度，高度和背景

<code>function createParticle (x, y) {
  // [...]
  // 計算從5px到25px的隨機大小
  const size = Math.floor(Math.random() * 20 + 5);
  // 將大小應用於每個粒子
  particle.style.width = `${size}px`;
  particle.style.height = `${size}px`;
  // 在藍色/紫色調色板中生成隨機顏色
  particle.style.background = `hsl(${Math.random() * 90 + 180}, 70%, 60%)`;
}/<code>

步驟4：為每個粒子添加動畫

<code>function createParticle (x, y) {
  // [...]
  // 在距離鼠標75像素的範圍內生成隨機的x和y目標
  const destinationX = x + (Math.random() - 0.5) * 2 * 75;
  const destinationY = y + (Math.random() - 0.5) * 2 * 75;

  // 將動畫存儲在變量中，因為稍後我們將需要它
  const animation = particle.animate([
    {
      // 設置粒子的原點位置
      // 我們將粒子偏移一半大小，以使其圍繞鼠標居中
      transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
      opacity: 1
    },
    {
      // 我們將最終座標定義為第二個關鍵幀
      transform: `translate(${destinationX}px, ${destinationY}px)`,
      opacity: 0
    }
  ], {
    // 將隨機持續時間設置為500到1500ms
    duration: 500 + Math.random() * 1000,
    easing: 'cubic-bezier(0, .9, .57, 1)',
    // 將每個粒子延遲從0ms到200ms的隨機值
    delay: Math.random() * 200
  });
}/<code>

因為我們有一個隨機的延遲，所以等待開始動畫的粒子在屏幕的左上角可見，為了防止這種情況，我們可以在全局CSS中為每個粒子設置零不透明度。

<code>particle {
  /* 和之前的一樣 */
  opacity: 0; 

}/<code>

步驟5：動畫完成後刪除粒子

從DOM中刪除粒子元素很重要，因為我們每次點擊都會創建30個新元素，所以瀏覽器的內存很快就會被填滿，導致出現問題。我們可以這樣做：

<code>function createParticle (x, y) {
  // 和前面的相同
  // 動畫結束後，從DOM中刪除元素
  animation.onfinish = () => {
    particle.remove();
  };
}/<code>

最終結果

把前面所說的所有的代碼整合在一起，我們就得到了我們想要的：一個豐富多彩的粒子爆炸效果。

發揮創造力

因為所有這些都是使用CSS，所以修改粒子樣式非常簡單，下面這五個使用各種形狀甚至字符的示例！

是不是很酷啊，在個人網站上用起來吧！！

本文案例真實，源碼完整，可在線預覽，需要的源碼的點擊我的頭像，私信獲取。

本頭條號聚焦大前端技術和程序員成長，如果對你有所啟發和幫助，可以點個關注、收藏。

作者簡介：同名微信公眾號作者，Web前端工程師，全棧開發工程師、持續學習者。

現在關注做同名微信公眾號，送精品視頻視頻教程大禮包！

閱讀更多 做工程師不做碼農 的文章

關鍵字: CSS 動畫 Safari