CSS3 realizes particle animation effect when matching kings
|
When coding, you will find that many things have the same end. There are thousands of ways to solve the problem, and any method that can solve the problem is a good method. You don't have to write the code in a very sophisticated way, otherwise later people will not be able to understand it, and maintenance will be a headache. Therefore, using the simplest and most popular code will be more conducive to later maintenance and development. Let’s first take a look at the preview of the background particle animation effect:
Button click particle animation <div class="button"> <div class="button-text">Confirm</div> </div> Since the button is trapezoidal, the previous code has added a pseudo-class to the button selector to implement the trapezoid, so we can only add another layer of elements (button-text) to implement the particles.
.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);
}
Add You should have seen that the default pseudo-element is js to listen for click events and add the
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);
}
Then we add CSS and start the animation
.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%;
}
}
We use This creates a button click particle animation effect. Similarly, we can add the same particle effect to the background. The code can basically be copied. Background particle effects
.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;
}Here we change the particle size, transparency, and layer (z-index). Let it execute the animation at the beginning and loop it indefinitely. For the animation execution effect, we can directly use the effect of the button above (topBubbles). The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: The w3c organization gives style recommendations for html4
>>: The difference between VOLUME and docker -v in Dockerfile
Recommend
MySQL 5.7 installation and configuration tutorial under CentOS7 (YUM)
Installation environment: CentOS7 64-bit, MySQL5....
Tutorial on installing MySQL database and using Navicat for MySQL
MySQL is a relational database management system ...
A brief discussion on HTML table tags
Mainly discuss its structure and some important pr...
abbr mark and acronym mark
The <abbr> and <acronym> tags represen...
Docker container exits after running (how to keep running)
Phenomenon Start the Docker container docker run ...
Solve the mysql user deletion bug
When the author was using MySQL to add a user, he...
MySQL 5.7.18 master-slave replication setup (one master and one slave) tutorial detailed explanation
1. Replication Principle The master server writes...
MySQL practical skills: analysis of methods to compare whether two tables have different data
This article uses an example to describe how MySQ...
Vue uses better-scroll to achieve horizontal scrolling method example
1. Implementation principle of scrolling The scro...
How can we promote Jiedaibao so that everyone will register? Jiedaibao promotion methods and skills
Jiedaibao is a mobile phone loan software platfor...
Complete steps to use element in vue3.0
Preface: Use the element framework in vue3.0, bec...
Highly recommended! Setup syntax sugar in Vue 3.2
Table of contents Previous 1. What is setup synta...
Control the light switch with js
Use js to control the light switch for your refer...
MySQL implements a function similar to connect_by_isleaf MySQL method or stored procedure
Recently, there is a particularly abnormal busine...
Today I encountered a very strange li a click problem and solved it myself
...It's like this, today I was going to make a...