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

Difficulty 🌟

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: 5px;
  display: inline-block;
  position: relative;
  background: rgba(255.255.255.0.15);
  overflow: hidden;
}

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

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

The principle,

Step 1

Use a SPAN tag

<span></span>
Copy the code

Set to

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

The renderings are as follows:

Step 2

Use span:: After as the white stripe

Set to

  • Absolute positioning (top:0 left:0)
  • The width is 96px and the height is 5px.
  • The background color is white
 span::after {
	content: ' ';
	width: 96px;
	height: 5px;
	background: white;
	position: absolute;
	top: 0;
	left: 0;
	/* animation: loading 2s linear infinite alternate; * /
  }
Copy the code

The renderings are as follows:

Step 3

Add animation for span:: After

The white strip moves from left to right and then right to left

Set two keyframes:

  • Initial position: far left
  • End position: most right end

At the far left, left: 0;

On the far rightleft: 100%; transform: translateX(-100%)

CSS code

  span::after {
	animation: loading 2s linear infinite alternate;
  }
  
  @keyframes loading {
	0% {
	  left: 0;
	  transform: translateX(0%)}100% {
	  left: 100%;
	  transform: translateX(-100%)}}Copy the code

The final effect is as follows:

things

Why do I do this on the far right? left: 100%; Transform: translateX(-100%) Not line?

If you just write left: 100%; Results as follows:

Note: The white border can be ignored but is only used to simulate the page boundary

What we want is that at the far right end, the far right end of the white stripe overlaps the far right end of the span, not the far left end overlaps the far right end of the Span

So we also need to use transform: translateX(-100%)

Then move the span::after to the left of 100% of its width

Be sure to note that the width is relative to span::after itself! (Unlike left, which is relative to the width of span)

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