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
Detailed explanation of the difference between url ending with / and without / in nginx proxy_pass configuration
When nginx configures proxy_pass, the difference ...
How to recover deleted MySQL 8.0.17 root account and password under Windows
I finished learning SQL by myself not long ago, a...
Implementation of building custom images with Dockerfile
Table of contents Preface Introduction to Dockerf...
Summary of MySql storage engine and index related knowledge
Storage Engine What is a database storage engine?...
Solution to Vue data assignment problem
Let me summarize a problem that I have encountere...
Solve the problem of specifying udp port number in docker
When Docker starts a container, it specifies the ...
HTML 5 Reset Stylesheet
This CSS reset is modified based on Eric Meyers...
Forty-nine JavaScript tips and tricks
Table of contents 1. Operation of js integer 2. R...
Pure CSS to achieve the water drop animation button in Material Design
Preface You should often see this kind of special...
Linux yum package management method
Introduction yum (Yellow dog Updater, Modified) i...
Perfect solution to the problem of webpack packaging css background image path
Inside the style tag of the vue component, there ...
Analysis of MySQL's planned tasks and event scheduling examples
This article uses examples to describe MySQL'...
How to set mysql5.7 encoding set to utf8mb4
I recently encountered a problem. The emoticons o...
jQuery implements all selection and reverse selection operation case
This article shares the specific code of jQuery t...
Using loops in awk
Let's learn about different types of loops th...