Jquery实现简单的粒子效果

最新推荐文章于 2024-07-30 03:32:24 发布

原创最新推荐文章于 2024-07-30 03:32:24 发布 · 611 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #粒子效果

coding 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用Jquery实现一个简单的五彩纸屑粒子效果。通过在body部分定义div，并配合脚本和样式部分的代码，可以创建出动态的粒子视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

——Jquery实现简单的五彩纸屑粒子效果效果图
废话不多说，直接贴代码
body部分只用定义一个简单的div

<div class="textcontainer">
   <span class="particletext confetti">Confetti</span>
</div>

脚本部分

<script>
confetti();

function confetti() {
   $.each($(".particletext.confetti"), function(){
      var confetticount = ($(this).width()/50)*10;
      for(var i = 0; i <= confetticount; i++) {
         $(this).append('<span class="particle c' + rnd(1,5) + '" style="top:' + rnd(10,50) + '%; left:' + rnd(0,100) + '%;width:' + rnd(6,8) + 'px; height:' + rnd(3,4) + 'px;animation-delay: ' + (rnd(0,30)/10) + 's;"></span>');
      }
   });
}

 function rnd(m,n) {
      m = parseInt(m);
      n = parseInt(n);
      return Math.floor( Math.random() * (n - m + 1) ) + m;
}
</script>

样式部分

<style>
body {
  padding: 40px 0;
  font-family: 'bebas', sans-serif;
  background-color: #fff; 
}
body .textcontainer {
  padding: 40px 0; 
  text-align: center;
}
body .particletext {
  text-align: center;
  font-size: 48px;
  position: relative;
}
body .particletext.confetti > .particle {
  opacity: 0;
  position: absolute;
  -webkit-animation: confetti 3s ease-in infinite;
          animation: confetti 3s ease-in infinite;
}
body .particletext.confetti > .particle.c1 {
  background-color: rgba(76, 175, 80, 0.5);
}
body .particletext.confetti > .particle.c2 {
  background-color: rgba(156, 39, 176, 0.5);
}
body .particletext.confetti > .particle.c3 {
  background-color: rgba(251, 140, 0, 0.5);
}
body .particletext.confetti > .particle.c4 {
  background-color: #cc2a5d;
}
body .particletext.confetti > .particle.c5 {
  background-color: rgba(33, 150, 243, 0.5);
}


@-webkit-keyframes confetti {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    -webkit-transform: translateY(-800%) rotate(270deg);
            transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000%) rotate(1440deg);
            transform: translateY(2000%) rotate(1440deg);
  }
}
@keyframes confetti {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%) rotate(0deg);
            transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    -webkit-transform: translateY(-800%) rotate(270deg);
            transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000%) rotate(1440deg);
            transform: translateY(2000%) rotate(1440deg);
  }
}
</style>