This is the 9th day of my participation in Gwen Challenge

preface

Hello! Friend!!!

First of all, thank you very much for reading haihong’s article. If there are any mistakes in the article, please point out ~

Ha ha, let me introduce myself

Nickname: Haihong

Tag: a program monkey | C++ player | 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!

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;
    border: 2px solid red;
}
span {
  width : 96px;
  height: 96px;
  position: relative;
}
span::before.span::after{
  position: absolute;
  content: ' ';
  width: 96px;
  height: 96px;
  top: 0;
  left: 0;
  background: white;
  border-radius: 50%;
  animation: animloader 4s ease-in-out infinite;
}
span::after{
  animation-delay: 2s;
}
  
@keyframes animloader {
  0% , 100%{ transform: scale(0); opacity: 1; }50% { transform: scale(1); opacity: 0;}
}
Copy the code

The principle,

Step 1

Using the SPAN tag, set to

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

Step 2

Use span::before, SPAN :: After pseudo-class elements as white circles

Set to

  • Absolute positioning (top:0 left:0)
  • 96px width and height (completely overlapping with span)
  • Background color: white
position: absolute;
  content: "'; width: 96px; height: 96px; top: 0; left: 0; background: white;Copy the code

The renderings are as follows

Step 3

Rounded corners. Rounded corners. Rounded corners

border-radius: 50%;
Copy the code

The renderings are as follows

Step 4

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

There are three states

  • Initial (0%) : Size 0 (relative to original size), color (white, transparency level 1)
  • Middle (50%) : Size 1 (relative to original size), color (white, transparency level 0)
  • End (100%) : Size 0 (relative to original size), color (white, transparency level 1)

The transformation process

  • Size: 0 > 1 — – > 0
  • Color: White gradually lightens, then gradually darkens
animation: animloader 4s ease-in-out infinite;
Copy the code

@keyframes animloader {
  0%, 100% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0; }}Copy the code

The renderings are as follows

Step 5

It can be seen from the effect picture in Step 4

Just a white circle

We actually set two (one before, one after)

To visually display two white circles

We’re going to animate after

So you can see two white circles at the same time

animation-delay: 2s;
Copy the code

The renderings are as follows

conclusion

Source of Study:

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

Writing is not easy, “like” + “favorites” + “forward”

Thanks for your support ❤️