用CSS3怎样制作相似王者游戏匹配的粒子动画

发布时间：2023-09-22 15:20:54 所属栏目：语言来源：

导读：在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。

所以用最简单通俗的代码，更能利于后期的维护开发

在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。

所以用最简单通俗的代码，更能利于后期的维护开发。

按钮点击粒子动画

<div class="button">

  <div class="button-text">确认</div>

</div>

由于按钮是梯形的，之前代码在button选择器上面已经加了伪类来实现梯形了，所以我们只能再套一层元素（button-text）来实现粒子。

.button-text {

  position: relative;

  width: 100%;

  border-radius: 4px;

  border: none;

  cursor: pointer;

}

.button-text:before,

.button-text:after {

  position: absolute;

  content: '';

  display: block;

  width: 140%;

  height: 100%;

  left: -20%;

  z-index: -1000;

  background-repeat: no-repeat;

}

.button-text:before {

  display: none;

  top: -75%;

  background-image:

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%);

  background-size:

    10% 10%,

    20% 20%,

    15% 15%,

    20% 20%,

    18% 18%,

    10% 10%,

    15% 15%,

    10% 10%,

    18% 18%;

}

.button-text:after {

  display: none;

  bottom: -75%;

  background-image:

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%);

  background-size:

    15% 15%,

    20% 20%,

    18% 18%,

    20% 20%,

    15% 15%,

    10% 10%,

    20% 20%;

}

.button-text:active {

  transform: scale(0.9);

}

在 button-text 的伪类元素上面，添加 background-image ,并用径向渐变 radial-gradient 画出多个圆作为粒子。

transform: scale(0.9) ，是鼠标点击时，缩放 button-text 元素。

大家应该都看到默认伪类元素是 display: none; 隐藏的。所有当我们点击时，需要添加一个选择器，让其显示出来，并执行动画。

js来监听点击事件，点击后添加 animate 选择器。

var animateButton = function(e) {

  e.preventDefault;

  e.target.classList.remove('animate');

  e.target.classList.add('animate');

  setTimeout(function(){

    e.target.classList.remove('animate');

  },700);

};

var classname = document.getElementsByClassName("button-text");

for (var i = 0; i < classname.length; i++) {

  classname[i].addEventListener('click', animateButton, false);

}

然后我们添加CSS，开始动画

.button-text.animate:before {

  display: block;

  animation: topBubbles ease-in-out 0.75s forwards;

}

.button-text.animate:after {

  display: block;

  animation: bottomBubbles ease-in-out 0.75s forwards;

}

@keyframes topBubbles {

  0% {

    background-position:

      5% 90%,

      10% 90%,

      10% 90%,

      15% 90%,

      25% 90%,

      25% 90%,

      40% 90%,

      55% 90%,

      70% 90%;

  }

  50% {

    background-position:

      0% 80%,

      0% 20%,

      10% 40%,

      20% 0%,

      30% 30%,

      22% 50%,

      50% 50%,

      65% 20%,

      90% 30%;

  }

  100% {

    background-position:

      0% 70%,

      0% 10%,

      10% 30%,

      20% -10%,

      30% 20%,

      22% 40%,

      50% 40%,

      65% 10%,

      90% 20%;

    background-size:

      0% 0%,

      0% 0%,

      0% 0%,

      0% 0%,

      0% 0%,

      0% 0%;

  }

}

@keyframes bottomBubbles {

  0% {

    background-position:

      10% -10%,

      30% 10%,

      55% -10%,

      70% -10%,

      85% -10%,

      70% -10%,

      70% 0%;

  }

  50% {

    background-position:

      0% 80%,

      20% 80%,

      45% 60%,

      60% 100%,

      75% 70%,

      95% 60%,

      105% 0%;

  }

  100% {

    background-position:

      0% 90%,

      20% 90%,

      45% 70%,

      60% 110%,

      75% 80%,

      95% 70%,

      110% 10%;

    background-size:

      0% 0%,

      0% 0%,

      0% 0%,

      0% 0%,

      0% 0%,

      0% 0%;

  }

}

我们通过 background-position 改变背景的位置，用 background-size 改变大小，来形成动画效果。

这样就形成按钮点击粒子动画效果了。

同理，我们可以在背景上面添加同样的粒子效果。代码基本可以copy。

背景粒子效果

.king:before {

  position: absolute;

  content: '';

  display: block;

  width: 100%;

  height: 100%;

  top: 0;

  z-index: 1;

  background-repeat: no-repeat;

  opacity: 0.4;

}

.king:before {

  background-image:

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%),

    radial-gradient(circle, #fff 20%, transparent 20%);

  background-size:

    10% 10%,

    12% 12%,

    5% 5%,

    12% 12%,

    5% 5%,

    10% 10%,

    5% 5%,

    10% 10%,

    5% 5%;

  display: block;

  animation: topBubbles ease-in-out 3s forwards infinite;

}

这里我们改变一下粒子的大小，和透明度，以及层次（z-index）。让其一开始就执行动画，并且循环执行（infinite）。动画执行效果，我们直接用上面按钮的效果（topBubbles）即可。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!