preface

Hello! Friend!!!

Thank you very much for reading haihong’s article, if there are any mistakes in the article, please point out ~

Self-introduction ଘ(੭, ᵕ)੭

Nickname: Haihong

Tag: programmer monkey | C++ contestant | student

Introduction: because of the C language acquaintance programming, then transferred to the computer major, had the honor to win the national award, provincial award and so on, has guaranteed graduate school. Currently learning C++/Linux (really really hard ~)

Learning experience: solid foundation + more notes + more code + more thinking + learn English well!

[Animation Xiao Xiao Le] Usually study life is rather boring, inadvertently in some web pages, applications transition/loading animation developed a strong interest, want to know how to achieve the specific? Then in the free time to learn how to use CSS to achieve some simple animation effects, the article is only for their own learning notes, record learning life, strive to understand the principle of animation, a lot of “eliminate” animation!

Results show

The Demo code

HTML

<! DOCTYPEhtml>
<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>
Copy the code

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 only for hints */
  border: 2px solid red;
}

span {
  width: 96px;
  height: 96px;
  display: inline-block;
  position: relative;
}

span::before.span::after {
  content: ' ';
  width: 96px;
  height: 96px;
  border: 6px solid white;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotation 4s ease-in-out infinite;
}

span::after {
  border-color: red;
  animation-delay: 2s;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg)}100% {
    transform: rotate(360deg)}}Copy the code

The principle,

Step 1

Using the SPAN tag, set

  • The width and height are 96px
  • Relative positioning
 width: 96px;
  height: 96px;
  position: relative;
Copy the code

Step 2

Use span::before and SPAN :: After as white and red boxes

Set to

  • Absolute positioning (left: 0; Top: 0)
  • The width and height are 96px
  • Border: 6px solid white;
span::before, span::after {
  width: 96px;
  height: 96px;
  border: 6px solid white;
  position: absolute;
  left: 0;
  top: 0;
}
Copy the code

The renderings are as follows

Step 3

Change the span::after background color to red

span::after {
  border-color: red;
}
Copy the code

The renderings are as follows

Note: The span::before and after positions overlap. In the picture, the red and white squares are in the same position, but after is set to red in the end

Step 4

Add animations for span::after, SPAN ::before

  • Rotate clockwise for 4s in an infinite loop
  • Speed curve: ease-in-out
 animation: rotation 4s ease-in-out infinite;
Copy the code
@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
Copy the code

The renderings are as follows

Step 5

Step 4 Animate both span::before and SPAN :: After

We need to separate the two displays

Delay the start time of span::after animation to separate span::before and SPAN ::after

span::after {
  animation-delay: 2s;
}
Copy the code

The renderings are as follows

conclusion

Study reference:

Codepen. IO/bhadupranja…

The essay is just a study note, recording a process from 0 to 1

Hope to help you, if there is a mistake welcome small partners to correct ~

I am haihong ଘ(੭, ᵕ)੭, if you think you can write, please give a thumbs-up

Thanks for your support ❤️