<> pure css realization loading animation

I believe that the last thing you want to see in the process of surfing the Internet is the picture of non-stop rotation in loading
So how did he do it ? In fact, through some simple css Skills can be achieved !
First of all, I'll give you the code with both hands
<style> *{ margin: 0; padding: 0; } body{ background-color: #000000; }
.container{ margin: 300px auto; width: 80px; height: 80px; position: relative; }
.box{ width: 50px; height: 50px; display: flex; flex-direction: column;
justify-content: space-between; } span{ display: block; width: 15px; height:
15px; background-color: #fff; border-radius: 50%; text-align: center;
line-height: 15px; animation: loading 0.8s linear infinite; box-shadow: 0px 0px
24px 2px #ffffff; } .group{ display: flex; justify-content: space-between; }
.container .box:nth-of-type(2){ transform: rotate(45deg); position: absolute;
top: 0; left: 0; } .c1{ animation-delay: -0.5s; } .c2{ animation-delay: -0.6s; }
.c3{ animation-delay: -0.7s; } .c4{ animation-delay: -0.8s; } .c5{
animation-delay: -0.9s; } .c6{ animation-delay: -1s; } .c7{ animation-delay:
-1.1s; } .c8{ animation-delay: -1.2s; } @keyframes loading { 0%{ transform:
scale(0); } 50%{ transform: scale(1); } 100%{ transform: scale(0); } } </style>
</head> <body> <div class="container"> <div class="box"> <div class="group"> <
span class="c8"></span> <span class="c2"></span> </div> <div class="group"> <
span class="c6"></span> <span class="c4"></span> </div> </div> <div class="box">
<div class="group"> <span class="c1"></span> <span class="c3"></span> </div> <
div class="group"> <span class="c7"></span> <span class="c5"></span> </div> </
div> </div>
Here is the effect of the implementation , I might add a little more shadows , We can adjust ourselves
First of all, we should make such an animation effect , We have to think about a problem : Is it really spinning ?
The answer is :NO!
in my opinion , In fact, a lot of special effects are just a cover up It reminds me 《 Criminal suspect X My dedication 》 A classic line in :

It looks like geometry , It's actually a function problem

In fact, in the field of mathematics , Or in the computer field , Or in any other field , The key to deal with the problem is to see clearly the nature of the problem . Back to the animation , It looks like a spinning effect , Actually
The result of the enlargement and reduction of eight circles at different times

<> The first step : Draw eight circles

The method I use here is to define two containers with the same width and height , Each of them contains four circles , Put it in four corners ,( It can be done by positioning , It can also be done with elastic boxes , Just choose the way you like ) At this point, the four circles overlap , We render one of the containers 45 degree , We can get a ring of eight circles .
The code is as follows :
.container .box:nth-of-type(2){ transform: rotate(45deg); position: absolute;
top: 0; left: 0;
The effect is as follows :
As for the size of the circle , shadow , colour , Let's play by ourselves

<> Step two : Defining keyframes

It's used here animation
@keyframes loading { 0%{ transform: scale(0); } 50%{ transform: scale(1); }
100%{ transform: scale(0); } } span{ display: block; width: 15px; height: 15px;
background-color: #fff; border-radius: 50%; text-align: center; line-height:
15px; animation: loading 0.8s linear infinite; box-shadow: 0px 0px 24px 2px
#ffffff; }
Divide the time we define into two equal parts :
0~50% enlarge 1 times ;50% ~ 100% Then restore to the original size , One for you infinite , Let him go round and round .

At this time, you can see that the eight circles are getting bigger and smaller together

<> The third step : Add different delays
.c1{ animation-delay: -0.5s; } .c2{ animation-delay: -0.6s; } .c3{
animation-delay: -0.7s; } .c4{ animation-delay: -0.8s; } .c5{ animation-delay:
-0.9s; } .c6{ animation-delay: -1s; } .c7{ animation-delay: -1.1s; } .c8{
animation-delay: -1.2s; }
Here I set the delay time for each circle individually
be careful : The reason why the delay here is negative is to let him start the animation ahead of time , Otherwise, the user just enters the page and starts animation , The experience can be very incoherent

Here's the basic one loading The little animation is done , It doesn't really matter how you do it , Now a lot of websites will use dynamic map to realize it directly , The focus is on ideas : When dealing with problems, we must see clearly the nature of the problem
This is the most important thing

If there is something wrong , Please forgive and correct

Technology
©2019-2020 Toolsou All rights reserved,
Final review of database : Summary of comprehensive application questions Laplance operator ( Second derivative ) Simple learning of computer composition principle pyqt Button call python program _PyQt: Link button to function in program How much can you go up once you change jobs ? Today, I saw the ceiling of job hopping python in str Function usage _python in str Usage Summary of built-in functions MySQL trigger web The server nginx---linux Installation and deployment C++ Chapter V polymorphism exercises :( It's coming to an end )python Check built-in functions , How to check python Built in function