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 use indexes to optimize MySQL ORDER BY statements
Create table & create index create table tbl1...
Using js to realize dynamic background
This article example shares the specific code of ...
Summary of various methods for Vue to achieve dynamic styles
Table of contents 1. Ternary operator judgment 2....
VMware Workstation is not compatible with Device/Credential Guard
When installing a virtual machine, a prompt appea...
Detailed explanation of dynamic link library calling C/C++ method in Python in Ubuntu
Install boost There are many ways to call C/C++ f...
Solution to occasional crash of positioning background service on Linux
Problem Description In the recent background serv...
How to add Tomcat Server configuration to Eclipse
1. Window -> preferences to open the eclipse p...
10 ways to view compressed file contents in Linux (summary)
Generally speaking, when we view the contents of ...
Detailed explanation of the principle of js Proxy
Table of contents What is Proxy Mode? Introducing...
Detailed explanation of single-choice and multiple-choice selection in HTML select tag
The select element creates a single-select or mult...
MySQL8.0 installation process under Centos7 in VMware workstation16 and Navicat remote connection
Table of contents 1. CentOS7+MySQL8.0, yum source...
Two special values in CSS are used to control the inherit and initial methods of the cascade
There are two special values that can be assign...
HTML basics - CSS style sheets, style attributes, format and layout details
1. position : fixed Locked position (relative to ...
How to install MySQL and enable remote connection on cloud server Ubuntu_Server_16.04.1
1. Install MySQL: Use the following three command...
Analysis and application of irregular picture waterfall flow principle
The layout problem of irregular picture walls enc...