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
How to set and get the number of Mysql connections
Get the number of connections --- Get the maximum...
vue-cli4.5.x quickly builds a project
1. Install vue-cli npm i @vue/cli -g 2. Create a ...
Detailed explanation of the problem of CSS class names
The following CSS class names starting with a num...
Linux installation MySQL5.6.24 usage instructions
Linux installation MySQL notes 1. Before installi...
Windows Server 2008 64-bit MySQL5.6 installation-free version configuration method diagram
1 Download the MySQL 5.6 version compressed packa...
Implementation of MySQL's MVCC multi-version concurrency control
1 What is MVCC The full name of MVCC is: Multiver...
Sample code for installing ASPNET.Core3.0 runtime in Linux
# The following examples are for x64-bit runtime ...
Solution to the problem that MySql always pops up the mySqlInstallerConsole window
MySql always pops up a MySQLInstallerConsole.exe ...
5 cool and practical HTML tags and attributes introduction
In fact, this is also a clickbait title, and it c...
How to create a test database with tens of millions of test data in MySQL
Sometimes you need to create some test data, base...
Solution to Nginx session loss problem
In the path of using nginx as a reverse proxy tom...
The difference between char, varchar and text field types in MySQL
In MySQL, fields of char, varchar, and text types...
MySQL Error 1290 (HY000) Solution
I struggled with a problem for a long time and re...
Method for realizing Internet interconnection by VMware virtual machine bridging
After installing VMware and creating a new virtua...
How to store false or true in MySQL
MySQL Boolean value, stores false or true In shor...