[Animation Elimination Music] HTML+CSS White Cloud Floating Effect 072

Preface

Hello! Little buddies!
Thank you very much for reading Haihong’s article. If there is an error in the article, you are welcome to point it out~
 
self-introduction ଘ(੭ˊᵕˋ)੭
nickname: Haihong
Tags: programmers|C++ players|student
profile: I got acquainted with programming due to C language, then turn to Entered the computer major, fortunately to have won national awards, provincial awards, etc., has been guaranteed research. I am currently learning C++/Linux (really too difficult~)
Learning experience: a solid foundation + more notes + more code + more thinking + good English!
 
[Animation Xiaoxiaole] Normally studying and life are boring, and I unintentionally have a strong interest in the transition/loading animation of some webpages and applications. Want to know how to achieve it? In my free time, I will learn how to use CSS to achieve some simple animation effects. The article is only for my own study notes, record learning life, strive to understand the principles of animation, and "eliminate" animation a lot!

Show results

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 is explained in detail

step 1

Use the span tag and set it to

  • Relative positioning
  • Width and height are both 50px
  • Background color: white
span {
  background: white;
  height: 50px;
  width: 50px;
  position: relative;
}

The effect diagram is as follows

Insert picture description here

Step 2

Use the box-shadow attribute to add 5 shadows to the span

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

The effect diagram is as follows

Insert picture description here

Step 3

rounded span

span {
  border-radius: 50%;
}

The effect diagram is as follows

Insert picture description here

Step 4

Change the colors of the 5 shadows to white

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

The effect diagram is as follows

Insert picture description here

Step 5

Move the span to the left by 60px

span {
  margin-left: -60px;
}

Get a little white cloud

Insert picture description here

Step 6

Add animation to span

The animation effect is described as: white clouds move up and down

Use the translateY attribute to move the span up and down on the y-axis (vertical direction)

  • Initial (0%): original position
  • Middle (50%): move up 20px
  • End (100%): original position

The animation code is:

animation: cloud 5s ease-in-out infinite;
@keyframes cloud {
	/*忽略0% 100% 因为span需要回到原位置*/
  50% {
    transform: translateY(-20px);
  }
}

The effect diagram is as follows

Insert picture description here

Step 7

Use span::after pseudo-element to act as the shadow of the white cloud, 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 effect diagram is as follows

Insert picture description here

Step 8

span::after fillet

span:after {
  border-radius: 50%;
}

The effect diagram is as follows

Insert picture description here

Step 9

Add animation to span::after

effect

  • When the white cloud moves upward, the shadow becomes smaller and the color becomes lighter;
  • Move down, the shadow becomes larger and the color becomes darker
span:after {
  animation: cloud_shadow 5s ease-in-out infinite;
}
@keyframes cloud_shadow {
  50% {
    transform: translateY(20px) scale(.7);
    opacity: .05;
  }
}

The final rendering is as follows

Insert picture description here
Note: It can be found from the renderings that, in fact, only the size and color depth of the shadows are changing, but their position has not changed. This is because at 50% of the span animation, span executes translateY(-20px). If span::after does not execute translateY(20px), then span::after will move 20px together. (The essence here is that the two effects are canceled out; so, the position of span::after has not changed)

If span::after is not set translateY (20px)

Then the following effect will appear: the shadow is also moving up and down

Insert picture description here

Conclusion

The article is only used as a study note to record a process from 0 to 1

I hope to help you, if there is any mistake, please correct me~

I’m Haihongଘ(੭ˊᵕˋ)੭ , if you think it’s ok , please like it

Thank you for your support ❤️

Insert picture description here