This is the 12th day of my participation in the August More Text Challenge. For details, see:August is more challenging

preface

Hello! Friend!!!

Thank you very much for reading this article. If there are any mistakes in this article, please point them out

ଘ(੭ straddle ᵕ)੭

Nickname: Sea Bombing

Tags: program ape | C++ contestant | student

Introduction: Got acquainted with programming because of C language, then transferred to computer major, honored to win national award, provincial award and so on, has been recommended for research. Currently learning C++/Linux (really, really hard ~)

Learning experience: solid foundation + more notes + more code + more thinking + learn English!

[Animation Eliminating joy] Usually learning life is boring, inadvertently to some web pages, application transition/loading animation generated a strong interest, want to know how to achieve the specific? Then in the idle time to learn how to use CSS to achieve some simple animation effects, the article is only for their own study notes, record learning life, to understand the principle of animation, more “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: #ed556a;
}

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

span {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
}

span::before {
  content: ' ';
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: -24px;
  animation: loading 2s linear infinite alternate;
}

span::after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: rgba(255.255.255.0.85);
  box-shadow: 0 0 10px rgba(255.255.255.0.15);
  animation: loadingx 2s linear infinite alternate;
}

@keyframes loading {
  0%.32% {
    box-shadow: 0 24px rgba(255.255.255.1), 24px 24px rgba(255.255.255.0), 24px 48px rgba(255.255.255.0), 0px 48px rgba(255.255.255.0)}33%.65% {
    box-shadow: 0 24px rgba(255.255.255.1), 24px 24px rgba(255.255.255.1), 24px 48px rgba(255.255.255.0), 0px 48px rgba(255.255.255.0)}66%.99% {
    box-shadow: 0 24px rgba(255.255.255.1), 24px 24px rgba(255.255.255.1), 24px 48px rgba(255.255.255.1), 0px 48px rgba(255.255.255.0)}100% {
    box-shadow: 0 24px rgba(255.255.255.1), 24px 24px rgba(255.255.255.1), 24px 48px rgba(255.255.255.1), 0px 48px rgba(255.255.255.1)}}@keyframes loadingx {
  0% {
    transform: translate(0.0) rotateX(0) rotateY(0)}33% {
    transform: translate(100%.0) rotateX(0) rotateY(180deg)}66% {
    transform: translate(100%.100%) rotateX(-180deg) rotateY(180deg)}100% {
    transform: translate(0.100%) rotateX(-180deg) rotateY(360deg)}}Copy the code

The principle,

Step 1

Using the span tag, set to

Relative positioning
Width and height are 48px
Background color: Goldenrod

span {
  width: 48px;
  height: 48px;
  position: relative;
  background-color:goldenrod;
}
Copy the code

The renderings are shown below

Step 2

Use the span::before pseudo-element, set to

Left: 0 top: -24px
Width and height are 24px
Background color: white

span::before {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: -24px;
  background-color: white;
}
Copy the code

The renderings are shown below

Before is the white square

Step 3

Add animation for span::before using four box-shadows for span::before

The positions of the four shadows are as follows:

Box-shadow: /* shadow 1*/ 0 24px red, /* Shadow 2*/ 24px 24px orange, /* Shadow 3*/ 24px 48px yellow, /* Shadow 4*/ 0px 48px green;Copy the code

The renderings are shown below

The key has four frames, and the core is whether each shadow is displayed or not

The rgba() function is used to control the display of each shadow, which is assumed to be white

Show shadow RGBA (255,255,255,1)
Rgba (255,255,255,0)

Summary: Display or not, is to change the color transparency level. Is 1, display; If the value is 0, it is not displayed

The first frame

Shadow 1 display
Shadows 2, 3, and 4 are not displayed

 box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
Copy the code

The renderings are shown below

The second frame

Shadows 1 and 2 are displayed
Shadows 3 and 4 are not displayed

box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
Copy the code

The renderings are shown below

The third frame

Shadows 1, 2, and 3 are displayed
Shadow 4 is not shown

box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 0);
Copy the code

The renderings are shown below

The fourth frame

Shadows 1, 2, 3, and 4 are displayed

box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1);
Copy the code

The renderings are shown below

In summary, the animation is a smooth transition from frame 1 to frame 4, and then back to frame 1 again

span::before {
  animation: loading 2s linear infinite alternate;
}
Copy the code

@keyframes loading {/* 1frames */ 0% {box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, } /* second frame */ 33%{box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0)} /* frame 3 */ 66% {box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, } /* frame 4 */ 100% {box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1)}}Copy the code

The renderings are shown below

Step 4

On the basis of step 3, remove the background color for span::before

Defined as animation 1

The renderings are shown below

Step 5

Ignore animation 1 from Step 4 for the moment

Use the span::after pseudo-element, set to

Absolute positioning (top: 0px left: 0px)
Width and height are 24px
Background color: white Transparency level: 0.85

span::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.85);
}
Copy the code

The renderings are shown below

Step 6

Add animation for span::after

There are four key frames

Frame 1 (initial state)

Two dimensional space: right shift: 0 down: 0
Three dimensional space: 0 degrees rotation about the X-axis and 0 degrees rotation about the Y-axis

 transform: translate(0, 0) rotateX(0) rotateY(0)
Copy the code

Frame 2 (relative to initial state)

In two dimensions: Right: 100% Down: 0 (100% is relative to its size, if it is 100px wide then move it by 100px)
Three dimensional space: 0 degrees rotation about the X-axis 180 degrees rotation about the Y-axis

transform: translate(100%, 0) rotateX(0) rotateY(180deg)
Copy the code

The effect of the transition from the first frame to the second frame is shown below

Frame 3 (relative to initial state)

Two dimensional space: Right shift: 100% Down: 100%
Three dimensional space: -180 degrees rotation about the X-axis 180 degrees rotation about the Y-axis

  transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
Copy the code

The effect of the transition from the second frame to the third frame is shown below

Frame 4 (relative to initial state)

Two dimensional space: Right shift: 0 Down: 100%
Three dimensional space: -180 degrees about the X-axis 360 degrees about the Y-axis

transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
Copy the code

The effect of the transition from the third frame to the fourth frame is shown below

In summary, the animation goes from frame 1 to frame 4 and back to frame 1

span::after {
  animation: loadingx 2s linear infinite alternate;
}
Copy the code

@keyframes loadingx {
  0% {
    transform: translate(0, 0) rotateX(0) rotateY(0)
  }
  33% {
    transform: translate(100%, 0) rotateX(0) rotateY(180deg)
  }
  66% {
    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
  }
  100% {
    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
  }
}
Copy the code

Define this animation as Animation 2

The renderings are shown below

Step 7

Animation 1 is:

Animation 2 is:

Overlay animation 1 with animation 2

The renderings are shown below

Step 8

Remove the span background color

The final renderings are shown below

conclusion

The article is only a study note, recording a process from 0 to 1

Hope to be helpful to you, if there is a mistake, welcome friends to correct ~

My name is haihu ଘ(੭ ᵕ)੭. If you think it is ok, please give me a like

Thanks for your support ❤️

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

[animation elimination joy] HTML+CSS custom loading animation 062

preface

Results show

The Demo code

The principle,

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

conclusion

[animation elimination joy] HTML+CSS custom loading animation 062

preface

Results show

The Demo code

The principle,

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

conclusion

Related Posts

The beauty of functional programming

👍 Wall crack recommendation -Vue e-commerce actual combat project

Byte order in C#