Question

我想在此Codepen项目中添加淡入功能：

https://codepen.io/Jeremboo/pen/ENVaMY?limit=all&page=2&q=particle（不是我的）。

我想做的是慢慢制作一个粒子，但我不知道该怎么做。

/* ---- START ---- */
function init() {
  var i = void 0;
  for (i = 0; i < numberParticlesStart; i++) {
    var angle = Math.random() * 360;
    particles.push(new Particle(windowWidth * 0.5 + Math.cos(angle) * circleWidth, windowHeight * 0.5 - Math.sin(angle) * circleWidth));
  }
}

这可能是我需要放置一些函数的代码我试过jquery但它不会工作

我的一次尝试

/* ---- START ---- */
function init() {
  var i = void 0;
  for (i = 0; i < numberParticlesStart; i++) {
    var angle = Math.random() * 360;
    particles.push(new Particle(windowWidth * 0.5 + Math.cos(angle) * circleWidth, windowHeight * 0.5 - Math.sin(angle) * circleWidth)).fadeIn( "slow" );
  }
}

我不确定我是否可以将jquery添加到纯js函数中。

Answer 1

您是否考虑过向包含动画的div添加CSS动画？

.f {
  position: fixed
  bottom: 5px
  right: 15px
  font-family: 'Arial'
  font-size: 0.7rem
  color: mainColor
  text-align: center;
  animation:3s ease 0s normal forwards 1 fadein;
  -webkit-animation:3s ease 0s normal forwards 1 fadein;
  opacity:1;
}

@keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

@-webkit-keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

如何将fadein添加到此功能

1 个答案: