资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

使用CSS3怎么实现一个粒子动画效果

本篇文章给大家分享的是有关使用CSS3怎么实现一个粒子动画效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

目前累计服务客户数千家,积累了丰富的产品开发及服务经验。以网站设计水平和技术实力,树立企业形象,为客户提供成都做网站、成都网站制作、成都外贸网站建设、网站策划、网页设计、网络营销、VI设计、网站改版、漏洞修补等服务。创新互联始终以务实、诚信为根本,不断创新和提高建站品质,通过对领先技术的掌握、对创意设计的研究、对客户形象的视觉传递、对应用系统的结合,为客户提供更好的一站式互联网解决方案,携手广大客户,共同发展进步。

按钮点击粒子动画


  确认

由于按钮是梯形的,之前代码在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;
}

以上就是使用CSS3怎么实现一个粒子动画效果,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


当前名称:使用CSS3怎么实现一个粒子动画效果
当前路径:http://cdkjz.cn/article/pgeocd.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220