编程知识 cdmana.com

"HTML + CSS" -- custom loading animation [027]

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

 Insert picture description here

Demo Code

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;
    border: 2px solid red;
}
span {
    
  width : 96px;
  height: 96px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 10px solid white;
  border-bottom-color: transparent;
  animation: rotation 2s linear infinite ;
}
span::after{
    
  content: '';
  position: absolute;
  left: 51px;
  top: 79px;
  border: 20px solid transparent;
  border-right-color: white;
  transform: rotate(-45deg);
}
@keyframes rotation {
    
  0% {
     transform: rotate(0deg) }
  100% {
     transform: rotate(360deg)
  }
}

The principle,

step 1

Use span Label as nock , Set to

  • Width 、 The height is 96px
  • Frame :10px solid, One of them / Left / The right border is white The bottom border is transparent
 width : 96px;
  height: 96px;
  border: 10px solid white;
  border-bottom-color: transparent; 

The renderings are as follows

 Insert picture description here

step 2

span Rounded labels

border-radius: 50%;

The renderings are as follows

 Insert picture description here

step 3

Use span::after Pseudo class elements As arrow

Set to

  • Absolute positioning
  • Frame :20px solid, The right border is white , On / Next / The left border is transparent
  • rotate -45 degree
  position: absolute;
  /* left: 51px;
  top: 79px; */
  border: 20px solid transparent;
  border-right-color: white;
  transform: rotate(-45deg);

The renderings are as follows
 Insert picture description here

The red part of the picture is span::after
 Insert picture description here

step 4

Set up span::after The location of

notes :

  • It takes a little bit of movement to move the position here
  • Make sure that the arrow and the tail of the arrow coincide well
  • It can be calculated by mathematical formula , It's going to take a little bit of time here , When you have time, you can update the distance formula that you need to move in more general situations
/* Here is the distance the arrow needs to move */
  left: 51px;
  top: 79px;

The renderings are as follows
 Insert picture description here

step 5

by span Add animation

  • Clockwise rotation (0-360 degree ) 2s Infinite loop
 animation: rotation  2s linear infinite ;
/* Animation to achieve */
@keyframes rotation {
    
  0% {
     transform: rotate(0deg) }
  100% {
     transform: rotate(360deg)
  }
}

 Insert picture description here

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 ️

 Insert picture description here

版权声明
本文为[Haihong Pro]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/04/20210422025429211x.html

Scroll to Top