This is the 23rd day of my participation in the August More 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

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: # 263238;
}
section {
    width: 650px;
    height: 300px;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The red border is only for hints */
    border: 2px solid red;
}

span{
    display: inline-block;
    position: relative;
    border-radius: 50%;
    border-top: 48px white solid;
    border-bottom: 48px white solid;
    border-left: 48px white solid;
    border-right: 48px transparent solid;
    color: white;
    animation: c  .5s linear infinite ;
}
@keyframes c {
  0%{
    box-shadow: 120px 0px 0 -40px rgba(255.255.255.5),
    100px 0px 0 -40px rgba(255.255.255.75),
    80px 0px 0 -40px rgba(255.255.255.1);
  }
  100%{
    box-shadow: 100px 0px 0 -40px rgba(255.255.255.5),
    80px 0px 0 -40px rgba(255.255.255.75),
    60px 0px 0 -40px rgba(255.255.255.1); }}span::before{
  position: absolute;
  content: ' ';
  display: inline-block;
  top: -48px;
  left: -48px;
  border-top: 48px white solid;
  border-bottom: 48px transparent solid;
  border-left: 48px transparent solid;
  border-right: 48px transparent solid;
  border-radius: 50%;
   animation: a .25s linear infinite alternate;
}

span::after{
  position: absolute;
  content: ' ';
  top: -48px;
  left: -48px;
  border-top: 48px transparent solid;
  border-bottom: 48px white solid;
  border-left: 48px transparent solid;
  border-right: 48px transparent solid;
  border-radius: 50%;
   animation: b .25s linear infinite alternate;
}

@keyframes a {
  0% { transform: rotate(45deg)}100% { transform: rotate(0deg)}}@keyframes b {
  0% { transform: rotate(-45deg)}100% { transform: rotate(0deg)}}Copy the code

The principle,

Step 1

Using the SPAN tag, set to

  • Relative positioning
  • The top, bottom and left borders should be 48px solid white
  • The right border is a 48px transparent solid line
span {
	position: relative;
	border-top: 48px white solid;
	border-bottom: 48px white solid;
	border-left: 48px white solid;
	border-right: 48px transparent solid;
}
Copy the code

The effect is shown below.

Step 2

Span rounded corners,

span {
	border-radius: 50%;
}
Copy the code

The effect is shown below.

Step 3

Add three shadows to span

	box-shadow: 120px 0px 0 -40px rgba(255.255.255.5), / * shadow1* /100px 0px 0 -40px rgba(255.255.255.75), / * shadow2* /80px 0px 0 -40px rgba(255.255.255.1);3 * / / * shadow
Copy the code

The effect is shown below.

Step 4

Animate the three shadows of span

The animation is simple, with three balls moving horizontally from the right to the left

All you need to do is change the horizontal offset in box-shadow


span {
	animation: c 1s linear infinite;
}
Copy the code
@keyframes c {
	0% {
		box-shadow: 120px 0px 0 -40px rgba(255.255.255.5), 
					100px 0px 0 -40px rgba(255.255.255.75), 
					80px 0px 0 -40px rgba(255.255.255.1);
	}
	100% {
		box-shadow: 100px 0px 0 -40px rgba(255.255.255.5), 
					80px 0px 0 -40px rgba(255.255.255.75), 
					60px 0px 0 -40px rgba(255.255.255.1); }}Copy the code

The effect is shown below.

Step 5

Use span::before and span::after to act as two parts of the mouth closure

First set span::before

Set to

  • Top: -48px left: -48px
  • Top border: 48px red solid
  • 48px transparent solid;
span::before {
	position: absolute;
	content: ' ';
	top: -48px;
	left: -48px;
	border-top: 48px red solid;
	border-bottom: 48px transparent solid;
	border-left: 48px transparent solid;
	border-right: 48px transparent solid;
}
Copy the code

The effect is shown below.

Rounded to change again

span::before {
	border-radius: 50%;
}
Copy the code

The effect is shown below.

Add animation for span::before

The animation effect is described as: keep rotating 0-45 degrees around the center of the circle

span::before {
	animation: a .5s linear infinite alternate;
}
Copy the code
@keyframes a {
	0% {
		transform: rotate(45deg)}100% {
		transform: rotate(0deg)}}Copy the code

The effect is shown below.

The same goes for span::after

Set to

  • Top: -48px left: -48px
  • 48px red solid;
  • 48px transparent solid;
  • Rounded: border-radius: 50%;
span::after {
	position: absolute;
	content: ' ';
	top: -48px;
	left: -48px;
	border-top: 48px transparent solid;
	border-bottom: 48px red solid;
	border-left: 48px transparent solid;
	border-right: 48px transparent solid;
	border-radius: 50%;
}
Copy the code

The effect is shown below.

Add the same animation for span:: After as before

span::after {
	animation: b .5s linear infinite alternate;
}
Copy the code
@keyframes b {
	0% {
		transform: rotate(-45deg)}100% {
		transform: rotate(0deg)}}Copy the code

The effect is shown below.

Step 6

Span ::after, SPAN ::before Changed the border color from red to white

Finally, span, SPAN ::after, and SPAN ::before are displayed together

Get the end result

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 you can write, please give a thumbs-up

Writing is not easy, “like” + “favorites” + “forward”

Thanks for your support ❤️