CSS3实现王者匹配时的粒子动画效果

站长资源 2024/12/28 佚名

27 1538 27

铁雪资源网 Design By www.gsvan.com

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

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

先来看看背景粒子动画效果预览图：

按钮点击粒子动画

<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）即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

CSS3,王者匹配,粒子动画

标签：

CSS3,王者匹配,粒子动画

铁雪资源网 Design By www.gsvan.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

铁雪资源网 Design By www.gsvan.com

评论“CSS3实现王者匹配时的粒子动画效果”

暂无CSS3实现王者匹配时的粒子动画效果的评论...

www.gsvan.com 铁雪资源网

39,976影音资源

144,792福利资源

1,817软件资源

431,128技术资源

CSS3实现王者匹配时的粒子动画效果

CSS3,王者匹配,粒子动画

css高级应用三种方法实现多行省略的示例代码

CSS实现菜单按钮动画

评论“CSS3实现王者匹配时的粒子动画效果”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

CSS3实现王者匹配时的粒子动画效果

CSS3,王者匹配,粒子动画

css高级应用三种方法实现多行省略的示例代码

CSS实现菜单按钮动画

评论“CSS3实现王者匹配时的粒子动画效果”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存