使用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://kswsj.cn/article/pgeocd.html
