我想模拟一个粒子爆炸,从屏幕中心到边缘(使用CSS,我保证不会将其用于恶意目的)。
这是一个示意图,以便您了解我的意思:
之前: 之后: 我尝试使用以下的HTML/CSS/JS,但它没有起作用(点仍然停留在屏幕中央):
HTML代码只有这个:
这是一个 CodePen 的链接:https://codepen.io/floatingrock/pen/KKpxpvJ
这是一个示意图,以便您了解我的意思:
之前: 之后: 我尝试使用以下的HTML/CSS/JS,但它没有起作用(点仍然停留在屏幕中央):
HTML代码只有这个:
<div id="animated"></div>
CSS:
// SCSS
#animated {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.particle {
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px;
transition: transform 1s ease-in-out;
&.on {
transform: translate(-30vw, -30vh);
}
&::after {
position: absolute;
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
}
}
}
而且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;
}
这是一个 CodePen 的链接:https://codepen.io/floatingrock/pen/KKpxpvJ
translate
:transform:translate(-50%, -50%) rotate(var(--r, 0deg)) translate(0);
? - FloatingRocktranslate(0)
就不会触发动画?我之前不知道这个。 - FloatingRock