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: 0;
  height: 10px;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  animation: loading 4s linear infinite;
}

@keyframes loading {
  0% {
    width: 0
  }
  100% {
    width: 100%}}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: 0px Height: 10px
  • Background color: white
  • Absolute positioning (top: 0; Left: 0) (Put it on the far left of span)
 span::after {
	content: ' ';
	width: 0px;
	height: 10px;
	background: white;
	position: absolute;
	top: 0;
	left: 0;
  }
Copy the code

The renderings are as follows:Note: span::after width is 0 so you can’t see the white part. This is just to show the position of after. Set its width to 10px to determine its position

Step 3

Add animation for span:: After

It’s very simple

The span::after white progressively fills the span

Essentially the span is 0 to 100% wide

 span::after {
	animation: loading 4s linear infinite;
  }
  
  @keyframes loading {
	0% {
	  width: 0
	}
	100% {
	  width: 100%}}Copy the code

Get the desired effect:

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