This is the 16th 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!

[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!

Demo

The Demo code is as follows:

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: #222f3e;
  /* background-color: #82466e; * /
  animation: backColor 4s infinite;
}

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

span {
  width: 8px;
  height: 40px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  background: white;
  color: white;
  animation: loading 0.6 s 0s linear infinite alternate;
}

span::before.span::after {
  content: ' ';
  width: 8px;
  height: 40px;
  border-radius: 4px;
  background: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  animation: loading 0.6 s 0.3 s linear infinite alternate;
}

span::after {
  left: -20px;
  animation-delay: 0.6 s;
}

@keyframes loading {
  0% {
    height: 64px;
  }
  100% {
    height: 5px; }}Copy the code

The principle,

Step 1

Using the span tag, set to

  • Width: 8 px
  • Height: 40 px
  • Background color: white
  • Color: white
  • Relative positioning
  • border-radius: 4px
span { width: 8px; height: 40px; border-radius: 4px; position: relative; background: white; color: white; }Copy the code

The renderings are shown below

Step 2

Add animation to span

The animation effect is described as: the length of a span changes from short to long to short again

Specific Settings:

  • Initial state: height 64px
  • End status: height 5px

Animation set to

  • Duration: 0.6s
  • Start delay of 0s
  • Velocity curve: linear, uniform change
  • An infinite loop
  • Animation alternate
Animation: Loading 0.6s 0s linear infinite alternate;Copy the code
@keyframes loading { 0% { height: 64px; } 100% { height: 5px; }}Copy the code

The renderings are shown below

Note: The premise of the above conditions is that Haihua has set span as the center of the page (the top, bottom, left and right are centered).

Step 3

Use the span::before and span::after pseudo-elements

So let’s set both

Its property is set to

  • Absolute positioning (left: 20px)
  • Width: 8 px
  • Height: 40 px
  • border-radius: 4px
  • Background color: white
span::before, span::after { content: ''; width: 8px; height: 40px; border-radius: 4px; background: white; position: absolute; left: 20px; }Copy the code

The renderings are shown below

Note: The above effect picture span animation is not valid for now

When the SPAN animation takes effect, the effect is as follows

You can see that the top part of the white part on the right is always at the same level as the top part on the left

Step 4

In order to fix span::before, span::after, do not move up and down with span

Set up the

span::before, span::after { top: 50%; transform: translateY(-50%); }Copy the code

Effect of the graph

Step 5

Add animation for span::before and span::after

The effect is the same as span animation, only the animation start delay 0.3s, and span animation before and after the formation of a relationship

Span ::before, span::after {animation: loading 0.6s 0.3s linear infinite alternate; }Copy the code
@keyframes loading { 0% { height: 64px; } 100% { height: 5px; }}Copy the code

The renderings are shown below

Step 6

Split span::before and span::after

Set span::after separately

  • Position it 20px to the left of span
  • The animation start delay time is 0.6s
span::after { left: -20px; Animation - delay: 0.6 s; }Copy the code

The positional relationship is as follows

The final effect is:

Question answer

Why in step fourtop: 50%; transform: translateY(-50%);How about span::after and before?

To figure out how it works

First let’s assume that span is 20px in height and 8px in width

Set left to 20px (height to 40px) only for before and after locations

The renderings are shown below

Then set top: 50% for before and after;

The renderings are shown belowYou can see that the “before” and “after” on the right are moved down, but the actual distance is half (50%) of the total length of the span 20px: 10px

In this case, the top in span::before and span::after is set to 50%, and the benchmark is relative to the span

For example, if span is 100px, if before is top: 50%, then move down 100* 50% = 50px; If span is 40px, then move before and after down 20px

Anyway, top is referenced relative to span!

Then set the translateY (50%);

The renderings are shown belowIt can be found that the centers of span and span::after and before are on the same axis

That’s because 50% in translateY(-50%) is 50% of the move relative to itself

If before and after are 40px, then 50% of their length is 40*50%=20px

In this way, span and before and after centers will be on the same level

In general, no matter how much span, span::before, span::after, as long as the top: 50%; transform: translateY(-50%); Can make them center on the same horizontal line

In general:

conclusion

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 ❤️