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>
            <div class="circle">
                <div class="wave"></div>
            </div>
        </section>
    </body>

</html>
Copy the code

CSS

/* Template CSS styles are for demo use only */

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

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #12383e;
}

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

section::before {
	content: 'CSS';
	width: 150px;
	height: 150px;
	text-align: center;
	line-height: 250px;
	background-color: #00cec9;
	position: absolute;
	top: -76px;
	right: -76px;
	transform: translate(50%, -50%);
	font-size: 32px;
	font-weight: 500;
	font-family: sans-serif;
	color: white;
	transform: rotate(45deg);
}

section::after {
	content: ' ';
	position: absolute;
	width: 100%;
	height: 100%;
	border: 10px solid white;
	border-radius: 20px;
}

/* Implementation code */

.circle {
	position: relative;
	width: 200px;
	height: 200px;
	background: #b0f4ff;
	border-radius: 50%;
	overflow: hidden;
	animation: loadingBreath 5s infinite linear;
}

.circle::before {
	content: 'Loading... ';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 18px;
	letter-spacing: 2px;
	color: #10a789;
	font-family: sans-serif;
	z-index: 2;
}

.circle::after {
	content: ' ';
	position: absolute;
	width: 100%;
	height: 25%;
	bottom: 0;
	background-image: linear-gradient(to top, #12c8e0.#36e9ff.#5ffbf1);
	animation: loadingRun 5s linear infinite;
}

.wave::before {
	content: ' ';
	position: absolute;
	left: -50%;
	width: 200%;
	height: 200%;
	z-index: 1;
	background-color: #85f7fb;
	border-radius: 52% 25% 62% 69%/25% 38%;
	animation: loadingWave 5s linear infinite;
}

.wave::after {
	content: ' ';
	position: absolute;
	left: -50%;
	width: 200%;
	height: 200%;
	z-index: 1;
	background-color: #d0f4ff;
	border-radius: 42% 38% 40% 62%/28% 35%;
	animation: loadingWave 5s ease-in-out infinite;
}

/* Breathing lamp animation */

@keyframes loadingBreath {
	0% {
		box-shadow: 0 0 5px 0 #85f7fb;
	}
	25% {
		box-shadow: 0 0 20px 0 #85f7fb;
	}
	50% {
		box-shadow: 0 0 5px 0 #85f7fb;
	}
	75% {
		box-shadow: 0 0 20px 0 #85f7fb;
	}
	100% {
		box-shadow: 0 0 5px 0 #85f7fb; }}/* Bottom liquid rising animation */

@keyframes loadingRun {
	0% {
		height: 25%;
	}
	100% {
		height: 100%; }}/* Wave animation */

@keyframes loadingWave {
	0% {
		top: -100%;
		transform: rotate(0);
	}
	100% {
		top: -200%;
		transform: rotate(360deg); }}Copy the code

The principle,

Step 1

Analyze it from the renderings

It can be divided into two parts

The container
The waves

Here we use two divs, one for the circle class and one for the Wave class, representing the container and wave respectively

            <div class="circle">
                <div class="wave"></div>
            </div>
Copy the code

Step 2

Set the circle class

Relative positioning
The width and height are 200px
Background color: # b0f4FF
The rounded: 50%

.circle {
	position: relative;
	width: 200px;
	height: 200px;
	background: #b0f4ff;
	border-radius: 50%;
}
Copy the code

The renderings are as follows:

Step 3

Circle ::befor pseudo-element

Used to display Loading… With the words

Set to

Absolute positioning
Put it right in the middle (top: 50%; left: 50%; The transform: translate (50%, 50%);)
Font size: 18px
Color: # 10 a789;
Z-index: 2 (greater than 1 to make the text at the top)

.circle::before {
	content: 'Loading... ';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 18px;
	letter-spacing: 2px;
	color: #10a789;
	font-family: sans-serif;
	z-index: 2;
}
Copy the code

The renderings are as follows:

Step 4

Circle ::after pseudo-element

Set to

Absolute location (bottom: 0;)
Width: 100%
Height: 25%
The background color is linear-gradient(to Top, # 12C8E0, # 36E9FF, # 5FFBF1);

.circle::after {
	content: ' ';
	position: absolute;
	width: 100%;
	height: 25%;
	bottom: 0;
	background-image: linear-gradient(to top, #12c8e0.#36e9ff.#5ffbf1);
}
Copy the code

The renderings are as follows:

Step 5

Animate the. Circle :: After pseudo-element

Make it gradually increase in height over time

Only two keyframes need to be identified

Initial position: height: 25%
End position: height: 100%

.circle::after {
	animation: loadingRun 5s linear infinite;
}


@keyframes loadingRun {
	0% {
		height: 25%;
	}
	100% {
		height: 100%; }}Copy the code

The renderings are as follows:

Step 6

Hide overflow from circle Settings

.circle {
	overflow: hidden;
}
Copy the code

The renderings are as follows:

Step 7

I comment the circle to hide the overflow and the Circle :: After animation for later analysis

.circle {
	/* overflow: hidden; * /
}
.circle::after {
	/* animation: loadingRun 5s linear infinite; * /
}
Copy the code

Then we use two pseudo-elements of wave::before, wave::afte and cirle:: After to create a wave effect

First set wave::before

Absolute positioning (left: -50%;)
The width and height are 200%
Z – index: 1
Background color: # 85f7FB
border-radius: 52% 25% 62% 69%/25% 38%; Focus on

.wave::before {
	content: ' ';
	position: absolute;
	left: -50%;
	width: 200%;
	height: 200%;
	z-index: 1;
	background-color: #85f7fb;
	border-radius: 52% 25% 62% 69%/25% 38%;/ * * /
}
Copy the code

The renderings are as follows:

.wave::before z-index = 1 > circile(0) > circile(0)

Add animation for.wave::before

Results described

As it spins, it rises

.wave::before {
	animation: loadingWave 5s linear infinite;
}

@keyframes loadingWave {
	0% {
		top: -100%;
		transform: rotate(0);
	}
	100% {
		top: -200%;
		transform: rotate(360deg); }}Copy the code

The renderings are as follows:

Do the same for Wave :: After

The difference is that the fillet rate of the four sides of C is different from before and the color is lighter

border-radius: 42% 38% 40% 62%/28% 35%;
background-color: #d0f4ff;
Copy the code

Everything else is the sameWhen Wave :: After and before apply the same animation

The renderings are as follows:

Step 8

Unhide the Circle overflow and the Circle :: After animation

.circle {
	overflow: hidden; 
}
.circle::after {
	 animation: loadingRun 5s linear infinite; 
}
Copy the code

The renderings are as follows:

Step 9

Finally add a breathing light animation effect for cirlce

.circle {
	animation: loadingBreath 5s infinite linear;
}

```css

@keyframes loadingBreath {
	0% {
		box-shadow: 0 0 5px 0 #85f7fb;
	}
	25% {
		box-shadow: 0 0 20px 0 #85f7fb;
	}
	50% {
		box-shadow: 0 0 5px 0 #85f7fb;
	}
	75% {
		box-shadow: 0 0 20px 0 #85f7fb;
	}
	100% {
		box-shadow: 0 0 5px 0 #85f7fb; }}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 it’s ok, please give it a thumbs up

Thanks for your support ❤️

Study reference:

www.bilibili.com/video/BV1Ai… Developer.mozilla.org/zh-CN/docs/…

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 | CSS] 086. Cool water wave Loading transition animation

preface

Results show

The Demo code

The principle,

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

conclusion

[Animation | CSS] 086. Cool water wave Loading transition animation

preface

Results show

The Demo code

The principle,

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

conclusion

Related Posts

An example from the source to understand the Vue diff, Vnode, patch, key

Require. Context, free your hands, implement automatic introduction ~

JSMS27- Merge two sorted linked lists – finger offer17