This is the fourth day of my participation in the August Text Challenge.More challenges in August

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: 4px solid white;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotation 4s ease-in-out infinite alternate;
}

span::after {
  border-color: red;
  animation-direction: alternate-reverse;
}

@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

At the same time set up

  • Absolute positioning (left: 0 top: 0)
  • The width and height are 96px
  • Border: 4px solid white
  content: '';
  width: 96px;
  height: 96px;
  border: 4px solid white;
  position: absolute;
  left: 0;
  top: 0;
Copy the code

The renderings are as follows

Step 3

To distinguish between before and after

Set 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::before and SPAN :: After

  • Clockwise rotation (0-360 degrees) 4s infinite loop
  • Speed curve: ease-in-out
  • Animation plays alternate in reverse
 animation: rotation 4s ease-in-out infinite alternate;
Copy the code
@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
Copy the code

The renderings are as follows

Step 5

The animation set in Step 4 is set for before and after at the same time, and the change process of the two is exactly the same

To visually separate before and after

We reverse the after animation (so that before and After are shown separately)

span::after {
  animation-direction: alternate-reverse;
}
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 ❤️