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 ...