This is the 9th day of my participation in the August More Text Challenge. For details, see:August is more challenging

preface

Hello! Friend!!!

Thank you very much for reading this article. If there are any mistakes in this article, please point them out

ଘ(੭ straddle ᵕ)੭

Nickname: Sea Bombing

Tags: program ape | C++ contestant | student

Introduction: Got acquainted with programming because of C language, then transferred to computer major, honored to win national award, provincial award and so on, has been recommended for research. Currently learning C++/Linux (really, really hard ~)

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

Daily sharing: Wechat official account [Haihong Pro] records life and learning, welcome to follow ~

[Animation Eliminating joy] Usually learning life is boring, inadvertently to some web pages, application transition/loading animation generated a strong interest, want to know how to achieve the specific? Then in the idle time to learn how to use CSS to achieve some simple animation effects, the article is only for their own study notes, record learning life, to understand the principle of animation, more “eliminate” animation!

Effect display – 1

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: #ed556a;
}

section {
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

span {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
  background: white;
  animation: loading 3s linear infinite;
}

@keyframes loading {
/* Turn the x axis 180 ° and the y axis 180 ° */
  0% {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
  }
  100% {
    transform: perspective(200px) rotateX(-180deg) rotateY(-180deg)}}Copy the code

The principle,

Step 1

Using the span tag, set to

  • Width and height are 48px
  • Background color: white
  width: 48px;
  height: 48px;
  background: white;
Copy the code

The renderings are shown below

Step 2

Add animation to span

  • I’m going to flip 180 degrees around the X-axis
  • And then you flip it 180 degrees around the Y-axis
@keyframes loading {/* transform: Perspective (200px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(200px) rotateX(-180deg) rotateY(0deg); } 100% { transform: perspective(200px) rotateX(-180deg) rotateY(-180deg) } }Copy the code

The renderings are shown below

Effect display – 2

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: #ed556a;
}

section {
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

span {
  width: 48px;
  height: 96px;
  display: inline-block;
  position: relative;
  color: white;
  border: 3px solid;
  animation: loading 2s linear infinite alternate;
}

span::before {
  content: ' ';
  position: absolute;
  top: -15px;
  left: 6px;
  width: 36px;
  height: 12px;
  background-color: white;
}

@keyframes loading {
  0% {
    box-shadow: 0 0 inset
  }
  100% {
    box-shadow: 0 -96px inset
  }
}
Copy the code

The principle,

Step 1

Using the span tag, set to

  • Relative positioning
  • Width 48px, height 96px
  • Border: 3px solid white
  • Color: white
span {
  width: 48px;
  height: 96px;
  position: relative;
  color: white;
  border: 3px solid;
}
Copy the code

The renderings are shown below

Step 2

Use the span::before pseudo-element to act as the top white square

Set to

  • Absolute positioning (top-15px, left 6px)
  • Width: 36 px
  • Height: 12 px
  • Background color: white
span::before {
  content: ''; 
  position: absolute;
  top: -15px;
  left: 6px;
  width: 36px;
  height: 12px;
  background-color: white;
}
Copy the code

The renderings are shown below

Note:

  • The top is -15px because the top white square is 12px wide and the bottom white border is 3px, so 12+3=15px
  • Left is 6px because to center the top white block, you need to move it to the left (48-36) /2=6px

Step 3

Use span’s box-shadow as the animation

What you want to achieve: Gradually fill in the interior of the white part below

  • Shadow inward

With a few frames from the animation:

When the shadow extends inward by 10px

span {
  box-shadow: 0 -10px inset
}
Copy the code

The renderings are shown below

When the shadow extends 48px inward

span {
  box-shadow: 0 -48px inset
}
Copy the code

The renderings are shown below

When the shadow extends 96px inward

span {
  box-shadow: 0 -96px inset
}
Copy the code

The renderings are shown below

Above: The shadow extends 96px inward from 0 and repeat

animation: loading 2s linear infinite ;
Copy the code
@keyframes loading {
  0% {
    box-shadow: 0 0 inset
  }
  100% {
    box-shadow: 0 -96px inset
  }
}
Copy the code

The renderings are shown below

Step 4

Set the animation to alternate

animation: loading 2s linear infinite alternate;
Copy the code

The renderings are shown below

conclusion

Study Reference:

Codepen. IO/bhadupranja…

The article is only a study note, recording a process from 0 to 1

Hope to be helpful to you, if there is a mistake, welcome friends to correct ~

My name is haihu ଘ(੭ ᵕ)੭. If you think it is ok, please give me a like

Thanks for your support ❤️