Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

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

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

span {
  width: 100%;
  height: 10px;
  display: inline-block;
  position: relative;
  background: rgba(255.255.255.0.15);
  overflow: hidden;
}

span::after {
  content: ' ';
  width: 192px;
  height: 10px;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% {
    left: 0;
    transform: translateX(-100%)}100% {
    left: 100%;
    transform: translateX(0%)}}Copy the code

The principle,

Step 1

Use a SPAN tag

<span></span>
Copy the code

Set to:

  • Width 100% height 10px
  • Relative positioning
  • Background color: white transparency level is 0.15
  span {
	width: 100%;
	height: 10px;
	position: relative;
	background: rgba(255.255.255.0.15);
  }
Copy the code

The renderings are as follows:

Step 2

Use span:: After as a white bar

Set to:

  • Width: 192px height: 10px
  • Background color: white
  • Absolute positioning (top: 0; Left: 0) (Put it on the far left of span)
 span::after {
	content: ' ';
	width: 192px;
	height: 10px;
	background: white;
	position: absolute;
	top: 0;
	left: 0;
  }
Copy the code

The renderings are as follows:

Step 3

Add animation for span:: After

The key is two frames

  • Initial position: The far right end of the white bar coincides with the far left end of the SPAN
  • End position: The left end of the white bar coincides with the right end of the SPAN

The initial positionEnd position

Write CSS code according to the animation description

  span::after {
	animation: loading 2s linear infinite;
  }

  @keyframes loading {
	0% {
	  /* make the left end of after overlap with span */
	  left: 0;
	  /* To align the right end of after with the left end of span, move it 100% of the width of after
	  transform: translateX(-100%)}100% {
	  left: 100%;
	  transform: translateX(0%)}}Copy the code

The renderings are as follows:

Note: The white rectangle is used to simulate the edges of the page

Step 4

In Step 3, you can see that: span::after exceeds the span boundary

So we just need to set up hidden overflow in the SPAN

 span {
	overflow: hidden; 
  }
Copy the code

Get the final effect drawing

conclusion

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 it’s ok, please give it a thumbs up

Thanks for your support ❤️