[Animation to eliminate music] pure CSS to draw a white cloud 071

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 in C language, and 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 "destroy" 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 orange;
}

/*白云*/
span {
  background: white;
  border-radius: 50%;
  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*/
  height: 50px;
  width: 50px;
  margin-left: -60px;
  position: relative;
}

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

Note: For detailed description of box-shadow attribute, please refer to ➡️ Portal

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

Concluding remarks

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