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

最新推荐文章于 2024-05-28 16:06:03 发布

HOLD ON!

最新推荐文章于 2024-05-28 16:06:03 发布

阅读量327

点赞数

原文链接：https://blog.csdn.net/llll789789/article/details/97173721

版权

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

IT新时代 2019-07-24 21:59:58 825 收藏
展开
在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。

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

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

按钮点击粒子动画
<div class="button">
<div class="button-text">确认</div>
</div>

1
2
3
4
由于按钮是梯形的，之前代码在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);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
在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前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
1
2
3
4
5
6
7
8
9
10
11
12
13
14
然后我们添加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%;
}
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

我们通过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;
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

这里我们改变一下粒子的大小，和透明度，以及层次（z-index）。让其一开始就执行动画，并且循环执行（infinite）。动画执行效果，我们直接用上面按钮的效果（topBubbles）即可。
————————————————
版权声明：本文为CSDN博主「IT新时代」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/llll789789/article/details/97173721