[animation Xiaole] HTML + CSS cloud floating effect 072

2021-06-19 01:19:46

animation xiaole html css cloud

Preface

Hello！ buddy ！
Thank you very much for reading Haihong's article , If there are mistakes in the text , You are welcome to point out ～

Self introduction. ଘ(੭ˊᵕˋ)੭
nickname ： Sea boom
label ： Program the ape ｜C++ player ｜ Student
brief introduction ： because C Language and programming , Then I turned to computer science , Lucky to have won the National Award 、 Provincial awards, etc , It has been insured . Currently learning C++/Linux（ It's really, really hard ～）
Learning experience ： Solid foundation + Take more notes + Knock more code + Think more + Learn English well ！

【 Animation Xiaole 】 It's boring to study and live at ordinary times , Inadvertently on some pages 、 Application transition / There's a lot of interest in loading animation , I want to know how to achieve it ？ Learn how to use it in your spare time css Achieve some simple animation effects , This article is only for your study notes , Record your study and life , Try to understand the principles of animation , A lot of “ eliminate ” Animation ！

Effect display

Insert picture description here

Demo Code

HTML

<!DOCTYPE html>
<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>

CSS

html, body {

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

display: flex;
justify-content: center;
align-items: center;
background: #93b5cf;
}
section {

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

position: relative;
animation: cloud 5s ease-in-out infinite;
background: white;
border-radius: 50%;
box-shadow: white 65px -15px 0 -4px, white 25px -25px, white 30px 10px, white 60px 15px 0 -10px, white 85px 5px 0 -5px;
height: 50px;
width: 50px;
margin-left: -60px;
}
span:after {

animation: cloud_shadow 5s ease-in-out infinite;
background: black;
border-radius: 50%;
content: '';
height: 15px;
width: 120px;
opacity: 0.2;
position: absolute;
left: 5px;
bottom: -60px;
}
@keyframes cloud {

50% {

transform: translateY(-20px);
}
}
@keyframes cloud_shadow {

50% {

transform: translateY(0px) scale(.7);
opacity: .05;
}
}

The principle,

step 1

Use span label , Set to

Relative positioning
Width 、 The height is 50px
Background color ： white

span {

background: white;
height: 50px;
width: 50px;
position: relative;
}

The renderings are as follows
Insert picture description here

step 2

utilize box-shadow attribute , by span add to 5 A shadow

 box-shadow: red 65px -15px 0 -4px, /* shadow 1*/
orange 25px -25px, /* shadow 2*/
yellow 30px 10px, /* shadow 3*/
green 60px 15px 0 -10px, /* shadow 4*/
blue 85px 5px 0 -5px; /* shadow 5*/

The renderings are as follows

Insert picture description here

step 3

span Fillet

span {

border-radius: 50%;
}

The renderings are as follows
Insert picture description here

step 4

take 5 The color of each shadow is changed to white

 box-shadow: white 65px -15px 0 -4px, /* shadow 1*/
white 25px -25px, /* shadow 2*/
white 30px 10px, /* shadow 3*/
white 60px 15px 0 -10px, /* shadow 4*/
white 85px 5px 0 -5px; /* shadow 5*/

The renderings are as follows

Insert picture description here

step 5

take span Move left 60px

span {

margin-left: -60px;
}

Get a little white cloud

Insert picture description here

step 6

by span Add animation

The animation effect is described as ： The clouds move up and down

Use translateY Property right span Conduct y Axis （ In the vertical direction ） Moving up and down

initial （0%）： Original location
middle （50%）： Move up 20px
At the end of （100%）： Original location

animation The animation code is ：

animation: cloud 5s ease-in-out infinite;

@keyframes cloud {

/* Ignore 0% 100% because span You need to go back to where you were */
50% {

transform: translateY(-20px);
}
}

The renderings are as follows

Insert picture description here

step 7

Use span::after Pseudo elements act as shadows of white clouds , Set to

Absolute positioning （ left: 5px bottom: -60px）
Height 15px Width 120px
Background color ： black
Color transparency ：0.2

span:after {

background: black;
content: '';
height: 15px;
width: 120px;
opacity: 0.2;
position: absolute;
left: 5px;
bottom: -60px;
}

The renderings are as follows

Insert picture description here

step 8

span::after Fillet

span:after {

border-radius: 50%;
}

The renderings are as follows
Insert picture description here

step 9

by span::after Add animation

effect

When the clouds move up , The shadow becomes smaller , The color lightens ;
Move down the , The shadows get bigger , dark

span:after {

animation: cloud_shadow 5s ease-in-out infinite;
}

@keyframes cloud_shadow {

50% {

transform: translateY(20px) scale(.7);
opacity: .05;
}
}

The final effect is as follows

Insert picture description here

Be careful ： You can see from the renderings that , Actually, the shadow is just the size 、 The color depth is changing , Its position has not changed . This is because span In the animation 50% moment ,span perform translateY(-20px), if span::after No implementation translateY(20px), that span::after Will move together 20px.（ The essence here is that the two effects cancel out ; 了 , therefore span::after There's no change in the position of ）

If span::after No settings translateY(20px)

Then there will be the following effect ： The shadows are moving up and down

Insert picture description here

Conclusion

The article is only for study notes , Record from 0 To 1 A process of

I hope it will be of some help to you , If you have any mistakes, you are welcome to correct them ～

I am a Sea boom ଘ(੭ˊᵕˋ)੭, If you think it's ok , Please like it

Thank you for your support ️
Insert picture description here

版权声明

本文为[Haihong Pro]所创，转载请带上原文链接，感谢

https://qdmana.com/2021/06/20210605041624540u.html

文章推荐