This is the 25th day of my participation in the August Genwen 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>
            <div class="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </section>
    </body>

</html>
Copy the code

CSS

html.body {
	margin: 0;
	height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #5e825a;
	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;
}

.box {
	width: 100px;
	height: 100px;
	display: flex;
	flex-wrap: wrap;
}

.box>div:nth-child(1) {
	width: 50px;
	height: 50px;
	background-color: #c0f0b9;
	animation: load1 4s infinite;
}

.box>div:nth-child(2) {
	width: 50px;
	height: 50px;
	background-color: #f0d8ad;
	animation: load2 4s infinite;
}

.box>div:nth-child(3) {
	width: 50px;
	height: 50px;
	background-color: #f0addb;
	animation: load3 4s infinite;
}

.box>div:nth-child(4) {
	width: 50px;
	height: 50px;
	background-color: #c4d8f0;
	animation: load4 4s infinite;
}

@keyframes load1 {
	from {
		transform: translate(0);
	}
	25% {
		transform: translate(100%);
	}
	50% {
		transform: translate(100%.100%);
	}
	75% {
		transform: translate(0.100%); }}@keyframes load2 {
	from {
		transform: translate(0);
	}
	25% {
		transform: translate(0.100%);
	}
	50% {
		transform: translate(-100%.100%);
	}
	75% {
		transform: translate(-100%.0); }}@keyframes load3 {
	from {
		transform: translate(0);
	}
	25% {
		transform: translate(0, -100%);
	}
	50% {
		transform: translate(100%, -100%);
	}
	75% {
		transform: translate(100%); }}@keyframes load4 {
	from {
		transform: translate(0);
	}
	25% {
		transform: translate(-100%.0);
	}
	50% {
		transform: translate(-100%, -100%);
	}
	75% {
		transform: translate(0, -100%); }}@keyframes backColor {
	from {
		background-color: #5e825a;
	}
	25% {
		background-color: #82466e;
	}
	50% {
		background-color: #425e82;
	}
	75% {
		background-color: # 423827; }}Copy the code

The principle,

Step 1

Use a div as a large container containing four small squares

Each square is also represented by a DIV

            <div class="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
Copy the code

Set to

  • The width and height should be 100px
  • Flex layout
  • Background color: blue
.box {
	width: 100px;
	height: 100px;
	display: flex;
	flex-wrap: wrap; / / a newlinebackground-color: blue;
}
Copy the code

The renderings are as follows

Step 2

Each set four small square evenly distributed

  • The width and height are 50px
  • Four colors (custom)

.box>div:nth-child(1) {
	width: 50px;
	height: 50px;
	background-color: #c0f0b9;
}

.box>div:nth-child(2) {
	width: 50px;
	height: 50px;
	background-color: #f0d8ad;
}

.box>div:nth-child(3) {
	width: 50px;
	height: 50px;
	background-color: #f0addb;
}

.box>div:nth-child(4) {
	width: 50px;
	height: 50px;
	background-color: #c4d8f0;
}
Copy the code

The renderings are as follows

Step 3

Add an animation for each small square

Here’s an example of a square

Animation is reduced to four key steps

  • Moves to the right
  • Down again
  • And then the left
  • The final up

Right shift description:Moving down description:Left shift description:Moving up description:Squares are moved primarily by the Transform property

.box>div:nth-child(1) {
	animation: load1 4s infinite;
}

@keyframes load1 {
	from {
		transform: translate(0);
	}
	25% {
		transform: translate(100%);
	}
	50% {
		transform: translate(100%.100%);
	}
	75% {
		transform: translate(0.100%); }}Copy the code

The movement of blocks looks like this

Note: Translate (x, y) takes the starting position as a reference point

Step 4

The animation of the other blocks works the same way

The difference is the starting position

When writing the animation effect, pay attention to the order of the direction of movement (there are only 4 directions of movement order can be combined).


.box>div:nth-child(1) {
	animation: load1 4s infinite;
}

.box>div:nth-child(2) {
	animation: load2 4s infinite;
}

.box>div:nth-child(3) {
	animation: load3 4s infinite;
}

.box>div:nth-child(4) {
	animation: load4 4s infinite;
} 

@keyframes load1 {
	from {
		transform: translate(0);
	}
	25% {
		transform: translate(100%);
	}
	50% {
		transform: translate(100%.100%);
	}
	75% {
		transform: translate(0.100%); }}@keyframes load2 {
	from {
		transform: translate(0);
	}
	25% {
		transform: translate(0.100%);
	}
	50% {
		transform: translate(-100%.100%);
	}
	75% {
		transform: translate(-100%.0); }}@keyframes load3 {
	from {
		transform: translate(0);
	}
	25% {
		transform: translate(0, -100%);
	}
	50% {
		transform: translate(100%, -100%);
	}
	75% {
		transform: translate(100%); }}@keyframes load4 {
	from {
		transform: translate(0);
	}
	25% {
		transform: translate(-100%.0);
	}
	50% {
		transform: translate(-100%, -100%);
	}
	75% {
		transform: translate(0, -100%); }}Copy the code

The renderings are as follows

Step 5

Comment out the box background color

.box {
	width: 100px;
	height: 100px;
	display: flex;
	flex-wrap: wrap;
	/* background-color: blue; * /
}
Copy the code

Step 6

Add animation in global background Settings

Causes the global background color to change color as the square moves

body {
	animation: backColor 4s infinite;
}

@keyframes backColor {
	from {
		background-color: #5e825a;
	}
	25% {
		background-color: #82466e;
	}
	50% {
		background-color: #425e82;
	}
	75% {
		background-color: # 423827; }}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 you can write, please give a thumbs-up

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

Thanks for your support ❤️