CSS3中怎么实现粒子动画效果

这期内容当中小编将会给大家带来有关CSS3中怎么实现粒子动画效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

按钮点击粒子动画

<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); }

有句话叫做“方法不对，努力白费”所有的前端大神都有自己的学习方法，而学web前端的学习也基本一致，而对于一个什么都不懂的初学者，根本不会知道该怎么学，这也是造成失败的最直接原因。所以学web前端一定要有人指点。如果你处在迷茫期，找不到方向。可以加入我们的前端学习交流qun： 784783012 。有任何不明白的东西随时来问我。点击： 前端学习圈

然后我们添加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中怎么实现粒子动画效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。