分解粒子：使用CSS设置动画

我想模拟粒子爆炸，从屏幕的中心到边缘（在CSS中，我保证不会将其用于邪恶目的）

这是一个视频，你知道我在说什么：

之前：

之后：

我曾尝试使用下面的HTML/CSS/JS，但它不起作用（点仍然停留在屏幕中间）：

HTML就是这样：

<div id="animated"></div>

还有Javascript：

document.addEventListener('DOMContentLoaded', onLoad);

function onLoad() {
  // animate
  for(var i = 0; i < 360; i+=5) {
    const particle = createParticle(animated, i);
  }
}

function createParticle(parentElem, rotation) {
  const particle = document.createElement('div');
  particle.style.transform = `rotate(${rotation}deg)`;
  particle.classList.add('particle');
  particle.classList.add('on'); // turn on
  parentElem.appendChild(particle);

  return particle;
}

document.addEventListener（'DOMContentLoaded'，onLoad）；
函数onLoad（）{
//生动活泼
对于（变量i=0；i<360；i+=5）{
常量粒子=创建粒子（动画，i）；
}
}
函数createParticle（parentElem，旋转）{
常量粒子=document.createElement（'div'）；
particle.style.transform=`rotate（${rotation}deg）`；
particle.classList.add（'particle'）；
particle.classList.add（'on'）；//启用
parentElem.appendChild（粒子）；
返回粒子；
}

---

这里有一个指向代码笔的链接：

这里有一个使用CSS变量的想法，它很容易用很少的代码进行调整

全屏运行以获得更好的效果：

document.addEventListener（'DOMContentLoaded'，onLoad）；
函数onLoad（）{
让parentElem=document.querySelector（'.container'）；
对于（变量i=0；i<360；i+=10）{
常量粒子=document.createElement（'div'）；
particle.style=`--r:${i}deg`；
parentElem.appendChild（粒子）；
}
}

.container{
宽度：20px；
高度：20px；
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.container>div{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
边界半径：50%；
背景：红色；
变换：旋转（var（--r，0deg））平移（0）；
动画：飞溅1s无限交替1s；
}
@关键帧飞溅{
到{
变换：旋转（var（-r，0度））平移（44vmin）；
}
}

这真是太棒了--克服了使用伪元素和

的需要

class@FloatingRock添加了另一个优化版本为什么在这里使用

translate

两次：

transform:translate（-50%，-50%）rotate（var（-r，0deg））translate（0）@FloatingRock第一个将居中，第二个（旋转）将旋转元素，最后一个将移动元素并创建平移动画。顺序很重要，因为每个变换都会受到前一个变换的影响。啊，没有最后一个
translate（0）
动画不会被触发？我不知道这件事。。
document.addEventListener('DOMContentLoaded', onLoad);

function onLoad() {
  // animate
  for(var i = 0; i < 360; i+=5) {
    const particle = createParticle(animated, i);
  }
}

function createParticle(parentElem, rotation) {
  const particle = document.createElement('div');
  particle.style.transform = `rotate(${rotation}deg)`;
  particle.classList.add('particle');
  particle.classList.add('on'); // turn on
  parentElem.appendChild(particle);

  return particle;
}