Preface

Hello! buddy !

First of all, thank you very much for reading Haihong's article , If there are mistakes in the text , You are welcome to point out ~

ha-ha Introduce yourself

nickname : Sea boom

label : There's a program ape |C++ player | Student

brief introduction : because C Language and programming , Then I turned to computer science , Lucky to have won the National Award 、 Provincial awards, etc , It has been insured . Currently learning C++/Linux( It's really, really hard ~)

Learning experience : Solid foundation + Take more notes + Knock more code + Think more + Learn English well !

Everyday sharing : WeChat official account 【 Sea boom Pro】 Record life 、 Learning , Share some source code or learning materials , Welcome to your attention ~

Effect display

Ideas

Here we use span The element represents the outer white circle

Two red balls are used separately span Two pseudo classes of ::before and ::after representative

According to the renderings , We can get a general idea

  • First use of span Make a square , Set the border
  • The two pseudo class elements are absolute positioning , It's on the top left and the bottom right of the square
  • Then fillet them separately
  • Finally, add the rotation animation

Demo Code

HTML

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section><span></span></section>
</body>
</html>

CSS

html,body{
margin: 0;
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
background: #263238;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* The red border is just a reminder */
border: 2px solid red;
} span{
width : 96px;
height: 96px;
border: 10px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: rotation 2s linear infinite;
}
span::before{
position: absolute;
content: '';
top: 15px;
left: 15px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
span::after{
position: absolute;
content: '';
bottom: 15px;
right: 15px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)
}
}

The principle,

step 1

take span The element is set to

  • One 96️96px The square of
  • Border is 10px, white ,solid
 width : 96px;
height: 96px;
border: 10px solid #fff;

The renderings are as follows

step 2

span::before and span::after Set up

  • Width 、 The height is 20px
  • Absolute positioning , among before On the top left ,after At the bottom right
  • The background color is red
/* before Set up */
position: absolute;
content: '';
top: 0;
left: 0;
width: 20px;
height: 20px;
background: red; /*after Set up */
position: absolute;
content: '';
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: red;

The renderings are as follows

step 3

Move slightly towards the center of the square ::before and ::after

/* before Set up */
top: 15px;
left: 15px; /*after Set up */
bottom: 15px;
right: 15px;

The renderings are as follows

step 4

Yes span、span::before、span::after Setting fillet

border-radius: 50%;

The renderings are as follows

step 7

by span Add animation

animation: rotation 1s linear infinite;
/* Animation to achieve */
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)
}

The renderings are as follows

Conclusion

Source of learning :

https://codepen.io/bhadupranjal/pen/vYLZYqQ

The article is only for study notes , Record from 0 To 1 A process of . I hope it will be of some help to you , If you have any mistakes, you are welcome to correct them ~

I'm Haihong ଘ(੭ˊᵕˋ)੭, If you think it's ok , Please like it

Writing is not easy to ,「 give the thumbs-up 」+「 Collection 」+「 forward 」

Thank you for your support ️

「HTML+CSS」-- Custom loading animation 【010】 More articles about

  1. [ Front end essay ][CSS] Make a load animation Post and use

    Said in the previous describe [ Loading loading...] The animated pictures often use GIF To achieve , but GIF It consumes a lot of resources , So use CSS Direct production is better . Effects portal 1 Effects portal 2 Key code @keyframes The rules use ...

  2. ios Custom loading animation effects

    In the development process , You may encounter different scenarios, and you need to wait for the data to be displayed after loading successfully . Here is a custom animation load view effect .      stay UIViewController The loading effect of , as follows - (void)vi ...

  3. Native JS+ CSS3 establish loading Loading animation ;

    design sketch : js establish loading show = function(){ //loading dom Elements var Div = document.createElement("div" ...

  4. For the grid layout picture to create a dazzling CSS Loading animation

    today , I'd like to share with you some cool pictures specially made for grid layout CSS Load animation . You can use these effects in your portfolio , Blog or any web page you want . The setup is simple . We used the following tool libraries to achieve this effect : Norm ...

  5. CSS Realize loading animation 8 - The dot rotates

    The animation introduced in this document is QQ mailbox APP Loading animation in , The effect is similar to , But it's not exactly the same . The implementation process is not complicated , I won't explain it in detail here , Go straight to source . There's another way to do it , Using elements 3D Conversion plus translation . 1. Look at the screenshot first 2. Source code ...

  6. CSS Realize loading animation 7 - The rings rotate

    Today's finishing of this animation is expected to be familiar to everyone , The rings rotate , I'm familiar with it , Yes , This is Youku Video APP The loading animation inside . I like to watch some videos in my spare time , After noticing this animation, I want to realize it with code , Today, I've sorted out , Share it with you ...

  7. CSS Realize loading animation 6 - Windmill

    This animation is adapted from the disc rotation , The first few steps are the same , The last step is different . The last step in the rotation of the disc is to add a round white border to the outer container , The superfluous part is hidden , In this case, a triangle element is added at the top or bottom of each rotated sub element , The angle that makes the windmill rotate . ...

  8. CSS Realize loading animation 5 - The disc rotates

    Today's animation is called disc rotation , I took my own name . It is estimated that many people are familiar with the effect of animation , It's the loading animation in wechat circle of friends . I've done the first few animations , There's actually one principle , It's how to separate the elements of animation . The realization of this animation is also very simple , The key ...

  9. CSS Realize loading animation 4 - The dot rotates

    Dot rotation is also often used in loading animation . It's implemented in the same way as chrysanthemum rotation , It's just a line form , One is the dot form . Arrange the dots at a fixed angle , Add delay to change the transparency of the animation can be achieved . This implementation is also relatively simple . 1. Animation screenshot ...

  10. CSS Realize loading animation 3 - Piano keys

    Today's animation is also very simple , Just a few lines of code . Give this animation an elegant name -- Piano keys , I really can't think of any more vivid name . I don't say much nonsense , Directly above . 1. First look at gif chart 2. Code implementation ideas 2 ...

Random recommendation

  1. Android in Activity How to handle the returned results

    Everyone has such an experience when shopping online , When confirming the order, select the receiver and address , Will jump to all the receiving information we put in the website ( Include shipping address , Consignee ) Interface for us to choose from , Once we click on one of the messages , It will automatically jump to the order delivery interface ...

  2. Directive Communication between

    Directive Communication between From the desert <AngularJS>5 There are two examples to explain in detail Directive( Instructions ) Mechanism The main difficulty of this example is how to use the sub Expander Inside, outside Accordion Of sco ...

  3. stay Asp.net MVC Use jqGrid-- Less code, less code

    This example shows how to dynamically generate the front end jqGrid Code , Generally, there is only one line of code : <%=Html.jqGrid<TestModel>(@"#jqT", "Test&q ...

  4. How to make Table Multiply the values of the first and second columns in and assign values to the third column

    Because of the need to do so , Don't talk nonsense , Go straight to the code , I am using GridView Bound data ,table It's the same thing , because GridView The code compiled through the browser is table. Here is aspx Page Html Code : < ...

  5. For class network - Android engineers are just beginning to develop -3-8 Java Conditional operators in

    source :http://www.imooc.com/code/1306 Conditional operator ( ? : ) Also known as “ Ternary operator ”. Grammatical form : Boolean expression ? expression 1 : expression 2 The calculation process : If the value of a Boolean expression is t ...

  6. Laravel Controllers

    Basic Controllers Instead of defining all of your route-level logic in a single routes.php file, you ...

  7. BZOJ 1001 The wolf catches the rabbit

    Description Now children's favorite " Pleasant goat and grey wolf ", Gray wolf can't catch sheep , But catching rabbits is better , And the rabbits are stupid now , They only have two nests , Now you're the wolf king , Facing the following one ...

  8. xdu_RainAndBow Anshan Iron strike

    We as weak schools xdu Team seven ( A big four , Big three or four , Sophomores ), I didn't expect to go out this year , It turned out to be lucky , The school got several exciting places , So we excitedly and successfully applied to Anshan Station , Um. ... I'm ready to travel . But we are too ...

  9. Vampire digital algorithm reference -- javascript edition

    // Vampire numbers java Programming idea Chapter four 75 page practice 10 for (var i = 10; i <= 99; i++) { for (var j = i + 1; j < 99; j+ ...

  10. Data segmentation ——Mysql The establishment and performance analysis of partition table

    Mysql The installation method can refer to : http://blog.csdn.net/jhq0113/article/details/43812895 Mysql For the introduction of partition table, please refer to : http://blog.c ...