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

  发布时间:2019-04-12 15:12:29   作者:IT智云编程   我要评论
这篇文章主要介绍了CSS3实现王者匹配时的粒子动画效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

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

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

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

 

按钮点击粒子动画

1
2
3
<div class="button">
  <div class="button-text">确认</div>
</div>

由于按钮是梯形的,之前代码在button选择器上面已经加了伪类来实现梯形了,所以我们只能再套一层元素(button-text)来实现粒子。

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
.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 选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
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,开始动画

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
.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。

背景粒子效果

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
.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)即可。

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

蓄力AI

相关文章

  • CSS3实现粒子旋转伸缩加载动画

    这篇文章主要为大家详细介绍了CSS3实现粒子旋转伸缩加载动画的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-22
  • CSS3实现大小不一的粒子旋转加载动画

    这篇文章主要介绍了CSS3实现大小不一的粒子旋转加载动画的相关资料,像是不断产生的气泡,显示加载进度,感兴趣的小伙伴们可以参考一下
    2016-04-21

最新评论