[ Written in the front ] Today is the second day of the college entrance examination. Here, I also wish all students a successful start and enter their ideal university. Taking advantage of today's auspicious day, I will introduce to you how to use CSS to realize Huawei charging effect.
Knowledge points involved : CSS3 special effects, implementation of Huawei charging special effects, application of CSS attribute filter, flexible application of after and before pseudo-elements. CSS3 realizes the dynamic effect of Huawei charging, and the dynamic effect of CSS bubbles.
Copyright Statement: Originally published in CSDN Blogger - Learn Codes for the Blind with a Cane , If you have any doubts, please leave a message and send a private message!
Not much else to say, let's show you the effect first (the complete code is at the end of the article):
This is actually not very difficult to implement. We need to clarify the following two core steps (circle drawing and bubble dynamics).
It is not easy to create, if you like and want to support bloggers, you can click here to be listed on the emperor list !
Table of contents
1. Circle dynamics (in order to understand, I set the dom to a white background)
1. First build a circular dom node
Use the before attribute to set border-radius: 50% to achieve a circular effect
2. Use the after pseudo-element to set the dynamics around it
The core lies in the setting of the animation property, which is mainly a dynamic effect. I set a 10-second animation effect display. After setting, it looks like this:
.g-circle::after {
content: "";
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%) rotate(0);
width: 200px;
height: 200px;
background-color: #00ff6f;
border-radius: 42% 38% 62% 49% / 45%;
animation: rotate 10s infinite linear;
}
3. Using CSS3 to realize the filter filter to achieve clear and blurred mixed effects
Mainly apply the setting of the following three attributes
hue-rotate hue rotation attribute
contrast adjust the contrast of the image
blur blur value setting attribute
The effect after setting is as follows:
.g-contrast {
filter: contrast(10) hue-rotate(0);
width: 300px;
height: 400px;
background-color: #000;
overflow: hidden;
animation: hueRotate 10s infinite linear;
}
.g-circle {
position: relative;
width: 300px;
height: 300px;
box-sizing: border-box;
filter: blur(8px);
}
4. Remove the background final effect
2. Charging dynamics (bubble realization)
In fact, it is the most convenient to implement this with scss, as long as you set the traversal loop to modify the offset value change and size change of each node, but CSS can also be implemented, but you need to set attributes for each bubble node, which is very trouble.
SCSS implements the core code:
@for $i from 0 through 15 {
li:nth-child(#{
$i}) {
$width: 15+random(15)+px;
left: 15 + random(70) + px;
top: 50%;
transform: translate(-50%, -50%);
width: $width;
height: $width;
animation: moveToTop #{
random(6) + 3}s ease-in-out -#{
random(5000)/1000}s infinite;
}
}
CSS implements the core code:
I set the effect on 16 nodes separately:
li:nth-child(0) {
left: 55px;
top: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
animation: moveToTop 8s ease-in-out -0.53s infinite;
}
li:nth-child(1) {
left: 70px;
top: 50%;
transform: translate(-50%, -50%);
width: 17px;
height: 17px;
animation: moveToTop 6s ease-in-out -4.403s infinite;
}
li:nth-child(2) {
left: 59px;
top: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
animation: moveToTop 5s ease-in-out -3.403s infinite;
}
li:nth-child(3) {
left: 69px;
top: 50%;
transform: translate(-50%, -50%);
width: 27px;
height: 27px;
animation: moveToTop 7s ease-in-out -3.684s infinite;
}
li:nth-child(4) {
left: 18px;
top: 50%;
transform: translate(-50%, -50%);
width: 17px;
height: 17px;
animation: moveToTop 8s ease-in-out -1.552s infinite;
}
li:nth-child(5) {
left: 50px;
top: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
animation: moveToTop 5s ease-in-out -4.481s infinite;
}
li:nth-child(6) {
left: 17px;
top: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
animation: moveToTop 6s ease-in-out -4.23s infinite;
}
li:nth-child(7) {
left: 64px;
top: 50%;
transform: translate(-50%, -50%);
width: 19px;
height: 19px;
animation: moveToTop 8s ease-in-out -3.49s infinite;
}
li:nth-child(8) {
left: 77px;
top: 50%;
transform: translate(-50%, -50%);
width: 25px;
height: 25px;
animation: moveToTop 7s ease-in-out -4.137s infinite;
}
li:nth-child(9) {
left: 37px;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
animation: moveToTop 5s ease-in-out -3.663s infinite;
}
li:nth-child(10) {
left: 40px;
top: 50%;
transform: translate(-50%, -50%);
width: 27px;
height: 27px;
animation: moveToTop 8s ease-in-out -4.285s infinite;
}
li:nth-child(11) {
left: 46px;
top: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
animation: moveToTop 8s ease-in-out -1.328s infinite;
}
li:nth-child(12) {
left: 79px;
top: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
animation: moveToTop 9s ease-in-out -0.785s infinite;
}
li:nth-child(13) {
left: 47px;
top: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
animation: moveToTop 6s ease-in-out -0.821s infinite;
}
li:nth-child(14) {
left: 43px;
top: 50%;
transform: translate(-50%, -50%);
width: 21px;
height: 21px;
animation: moveToTop 8s ease-in-out -1.952s infinite;
}
li:nth-child(15) {
left: 43px;
top: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
animation: moveToTop 7s ease-in-out -2.652s infinite;
}
The effect is as follows:
Copyright Statement: Originally published in CSDN Blogger - Learn Codes for the Blind with a Cane, If you have any doubts, please leave a message and send a private message!
3. Complete code package sharing
Baidu network disk download address
Link: https://pan.baidu.com/s/1VPRbAqInisTfhrPfcocOMw
Extraction code: hdd6
123 cloud disk download address
Link: https://www.123pan.com/s/ZxkUVv-5iJ4.html
Extraction code: hdd6
Easter Egg List
Dedicated to creating a masterpiece, I would like to solve your confusion. If you are lucky, I hope you will be on the list to help out. Thank you very much! Click here for the entrance of
Huangbang