preface

Only if you can think of it, there is no CSS can’t do it. Today we share a CSS only effect – weather

The effect

The source code

The following is for the effect of all the implementation of the source code, because the CSS content is longer, the relevant CSS can click to view to expand reading.

or

Click here to view the source code, with codepen online editing to bring you a different experience. You can hit star and come back.

Sunny

<! -- html -->
<div class="weather">
    <div class="sunny">
        <span class="sun"></span>
    </div>
</div>
Copy the code
Click on the sunny CSS source code 
    .weather { width: 100%; font-size: -webkit-calc(1em); font-size: calc(1em); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; font-family: 'Work Sans', sans-serif; background: #212125; color: #e6e8db; } .sunny { -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; display: block; position: relative; font-size: -webkit-calc(11em); font-size: calc(11em); width: 1em; height: 1em; margin: .3em; border-radius: 100%; -webkit-box-shadow: 0 0 0 0.0em currentColor inset, 0 0 0.3em-0.03em #fd6f21; Box-shadow: 0 0 0 0.05em currentColor inset, 0 0 0.3 em-0.03 em #fd6f21; background: -webkit-linear-gradient(top right, #fc5830 0%, #f98c24 65%); background: linear-gradient(to top right, #fc5830 0%, #f98c24 65%); } .sun { position: absolute; top: 20%; left: 80%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 40%; height: 40%; border-radius: 100%; background: #ffeb3b; -webkit-box-shadow: 0 0 0 0.02em currentColor inset, 0 0 0.3em-0.03em #fd6f21; Box-shadow: 0 0 0 0.02em currentColor Inset, 0 0 0.3em-0.03em #fd6f21; -webkit-transform-origin: .1em .1em; -ms-transform-origin: .1em .1em; transform-origin: .1em .1em; } .sun::after { content: ''; position: absolute; top: .1em; left: 0; will-change: transform; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: .1em; height: .1em; border-radius: 100%; Background: Rgba (255, 255, 255, 0.1); -webkit-box-shadow: 0 0 0.1em 0 rgba(255, 255, 255, 0.3) inset, -0.1 em-0.1 em 0 0.2em rgba(255, 255, 255, 0.1); Box-shadow: 0 0 0.1em 0 rgba(255, 255, 255, 0.3) inset, -0.1 em-0.1 em 0 0.2em rgba(255, 255, 255, 0.1); -webkit-animation: flare 12000ms infinite alternate linear; animation: flare 12000ms infinite alternate linear; } @-webkit-keyframes flare {to {-webkit-transform: translate(-0.3em, 0.3em); The transform: translate (0.3-0.3 em, em); opacity: .4; font-size: .2em; }} @keyframes flare {to {-webkit-transform: translate(-0.3em, 0.3em); The transform: translate (0.3-0.3 em, em); opacity: .4; font-size: .2em; }}Copy the code

Cloudy

<! -- html -->
<div class="weather">
    <div class="cloudy">
        <span class="cloud"></span>
        <span class="cloud"></span>
    </div>
</div>
Copy the code
Check out the cloudy CSS source code 
    .weather { width: 100%; font-size: -webkit-calc(1em); font-size: calc(1em); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; font-family: 'Work Sans', sans-serif; background: #212125; color: #e6e8db; } .cloudy { -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; display: block; position: relative; font-size: -webkit-calc(11em); font-size: calc(11em); width: 1em; height: 1em; margin: .3em; border-radius: 100%; -webkit-box-shadow: 0 0 0 0.0em currentColor inset, 0 0 0.3em-0.03em #c9e8de; Box-shadow: 0 0 0 0.05em currentColor inset, 0 0 0.3 em-0.03em #c9e8de; background: -webkit-gradient(linear, from(#1b9ce2), to(#e0e2e5)); background: -webkit-linear-gradient(top right, #1b9ce2 0%, #e0e2e5 90%); background: linear-gradient(to top right, #1b9ce2 0%, #e0e2e5 90%); } .cloud { position: absolute; top: .1em; left: 65%; width: .37em; height: .13em; border-radius: .1em; background-color: #fff; -webkit-box-shadow: 0 0 0.1em 0.02em #f0f2f0 inset, 0 0 0.3em -0.03em #c9e8de; Box-shadow: 0 0 0.1em 0.02em #f0f2f0 inset, 0 0 0.3 em-0.03em #c9e8de; -webkit-animation: move 3000ms infinite ease-in-out; animation: move 3000ms infinite ease-in-out; } .cloud + .cloud { top: 25%; left: 40%; -webkit-animation: move 3700ms infinite linear; animation: move 3700ms infinite linear; } .cloud::before, .cloud::after { content: ''; position: inherit; border-radius: inherit; background-color: inherit; -webkit-box-shadow: inherit; box-shadow: inherit; bottom: 30%; } .cloud::before { left: .05em; width: .2em; height: .2em; } .cloud::after { left: .15em; width: .15em; height: .15em; } @-webkit-keyframes move {50% {-webkit-transform: translateX(-0.05em); The transform: translateX em (0.05); }} @keyframes move {50% {-webkit-transform: translateX(-0.05em); The transform: translateX em (0.05); }}Copy the code
  




Snowy


<! -- html -->
<div class="weather">
    <div class="snowy">
        <span class="snowman"></span>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
Copy the code



Click on the snowy CSS source code

    .weather { width: 100%; font-size: -webkit-calc(1em); font-size: calc(1em); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; font-family: 'Work Sans', sans-serif; background: #212125; color: #e6e8db; } .snowy { -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; display: block; position: relative; font-size: -webkit-calc(11em); font-size: calc(11em); width: 1em; height: 1em; margin: .3em; border-radius: 100%; -webkit-box-shadow: 0 0 0 0.0em currentColor inset, 0 0 0.3em-0.03em #c9e8de; Box-shadow: 0 0 0 0.05em currentColor inset, 0 0 0.3 em-0.03em #c9e8de; background: -webkit-gradient(linear, from(#758595), to(#e0e2e5)); background: -webkit-linear-gradient(bottom left, #758595 0%, #e0e2e5 90%); background: linear-gradient(to bottom left, #758595 0%, #e0e2e5 90%); } .snowy ul { position: absolute; list-style: none; top: 0%; left: 10%; right: 0%; height: 100%; margin: 0; padding: 0; } .snowy li::before, .snowy li::after { content: ''; position: absolute; list-style: none; width: .015em; height: .01em; border-radius: 100%; background-color: currentColor; will-change: transform, opacity; -webkit-animation: snow 3700ms infinite ease-out; animation: snow 3700ms infinite ease-out; opacity: 0; } .snowy li:nth-child(2n+1)::before, .snowy li:nth-child(13n+11)::after { top: -7%; left: 40%; } .snowy li:nth-child(3n+2)::before, .snowy li:nth-child(11n+7)::after { top: 5%; left: 90%; -webkit-animation-delay: 1000ms; animation-delay: 1000ms; } .snowy li:nth-child(5n+3)::before, .snowy li:nth-child(7n+5)::after { top: -10%; left: 80%; -webkit-animation-delay: 2000ms; animation-delay: 2000ms; } .snowy li:nth-child(7n+5)::before, .snowy li:nth-child(5n+3)::after { top: 10%; left: 10%; -webkit-animation-delay: 1300ms; animation-delay: 1300ms; } .snowy li:nth-child(11n+7)::before, .snowy li:nth-child(3n+2)::after { top: 20%; left: 70%; -webkit-animation-delay: 1500ms; animation-delay: 1500ms; } .snowy li:nth-child(13n+11)::before, .snowy li:nth-child(2n+1)::after { top: 35%; left: 20%; -webkit-animation-delay: 500ms; animation-delay: 500ms; } .snowman { position: absolute; bottom: 30%; left: 40%; width: .15em; height: .15em; opacity: .9; background: currentColor; border-radius: 100%; } .snowman::after { content: ''; position: absolute; top: 90%; left: 30%; -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); width: .275em; height: .3em; border-radius: inherit; background-color: currentColor; } .snowman::before { content: ''; position: absolute; top: 0%; left: 50%; -webkit-transform: translate(-55%, -50%); -ms-transform: translate(-55%, -50%); transform: translate(-55%, -50%); width: .45em; height: .4em; border-radius: 60%; border: .02em solid transparent; border-bottom-color: #758595; will-change: border-radius; -webkit-animation: snowman 9000ms infinite ease-in; animation: snowman 9000ms infinite ease-in; } @-webkit-keyframes snow { 50% { opacity: 1; } -webkit-transform: translate(-0.1em, 15vmin); The transform: translate (0.1 em, 15 vmin); } } @keyframes snow { 50% { opacity: 1; } -webkit-transform: translate(-0.1em, 15vmin); The transform: translate (0.1 em, 15 vmin); } } @-webkit-keyframes snowman { 50% { border-radius: 60% 60% 30% 50%; } } @keyframes snowman { 50% { border-radius: 60% 60% 30% 50%; }}Copy the code
  




Stormy


<! -- html -->
<div class="weather">
    <div class="stormy">
        <span class="cloud"></span>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
Copy the code



Click on the stormy CSS source

    .weather { width: 100%; font-size: -webkit-calc(1em); font-size: calc(1em); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; font-family: 'Work Sans', sans-serif; background: #212125; color: #e6e8db; } .stormy { -webkit-box-flex: 0; -webkit-flex: block; -ms-flex: block; flex: block; display: block; position: relative; font-size: -webkit-calc(11em); font-size: calc(11em); width: 1em; height: 1em; margin: .3em; border-radius: 100%; -webkit-box-shadow: 0 0 0 0.0em currentColor inset, 0 0 0.3em-0.03em #34c6d8; Box-shadow: 0 0 0 0.05em currentColor inset, 0 0 0.3 em-0.03 em #34c6d8; background: -webkit-gradient(linear, from(#4b9cc2), to(#9adbd9)); background: -webkit-linear-gradient(top right, #4b9cc2 0%, #9adbd9 100%); background: linear-gradient(to top right, #4b9cc2 0%, #9adbd9 100%); } .stormy::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: .05em; border-radius: 100%; opacity: .4; will-change: background-color; -webkit-animation: flash 2300ms infinite linear 80ms; animation: flash 2300ms infinite linear 80ms; } .stormy .cloud { position: absolute; top: .1em; width: .37em; height: .13em; border-radius: .1em; background-color: #c9e8de; The font - size: 1.3 em. left: 50%; Box-shadow: 0 0.1em.02em #f0f2f0 inset,0 0.3em-0.03em #c9e8de; will-change: background-color, transform, opacity; -webkit-animation: cloudflash 2300ms infinite linear, move 3700ms infinite linear; animation: cloudflash 2300ms infinite linear, move 3700ms infinite linear; } .cloud::before, .cloud::after { content: ''; position: inherit; border-radius: inherit; background-color: inherit; -webkit-box-shadow: inherit; box-shadow: inherit; bottom: 30%; } .cloud::before { left: .05em; width: .2em; height: .2em; } .cloud::after { left: .15em; width: .15em; height: .15em; } .stormy ul { position: absolute; list-style: none; top: 0%; left: 70%; right: 0%; height: 100%; margin: 0; padding: 0; } .stormy li, .stormy li::before, .stormy li::after { position: absolute; width: .005em; height: .02em; border-radius: 10%; background-color: #eee; opacity: 0; will-change: transform, opacity; -webkit-animation: rain 2000ms infinite linear; animation: rain 2000ms infinite linear; -webkit-transform: rotate(25deg); -ms-transform: rotate(25deg); transform: rotate(25deg); } .stormy li::before, .stormy li::after { content: ''; } .stormy li:nth-child(5n+3)::before, .stormy li:nth-child(11n+7)::after, .stormy li:nth-child(2n+1) { top: 10%; left: 68%; -webkit-animation-delay: 500ms; animation-delay: 500ms; } .stormy li:nth-child(3n+2)::after, .stormy li:nth-child(7n+5)::after, .stormy li:nth-child(3n+2) { top: 5%; left: 45%; -webkit-animation-delay: 1250ms; animation-delay: 1250ms; } .stormy li:nth-child(2n+1)::before, .stormy li:nth-child(5n+3)::after, .stormy li:nth-child(7n+5) { top: 4%; left: 82%; -webkit-animation-delay: 750ms; animation-delay: 750ms; } .stormy li:nth-child(11n+7)::before, .stormy li:nth-child(3n+2)::after, .stormy li:nth-child(7n+5) { top: 15%; left: 15%; -webkit-animation-delay: 2000ms; animation-delay: 2000ms; } .stormy li:nth-child(7n+5)::before, .stormy li:nth-child(2n+1)::after, .stormy li:nth-child(11n+7) { top: 10%; left: 33%; -webkit-animation-delay: 2500ms; animation-delay: 2500ms; } @-webkit-keyframes flash { 49% { background-color: rgba(255, 255, 255, 0); } 51% { background-color: currentColor; } 53% { background-color: rgba(255, 255, 255, 0); } 57% { background-color: currentColor; } 85% { background-color: rgba(255, 255, 255, 0); } } @keyframes flash { 49% { background-color: rgba(255, 255, 255, 0); } 51% { background-color: currentColor; } 53% { background-color: rgba(255, 255, 255, 0); } 57% { background-color: currentColor; } 85% { background-color: rgba(255, 255, 255, 0); } } @-webkit-keyframes cloudflash { 49% { background-color: #c9e8de; } 51% { background-color: #f0f2f0; } 53% { background-color: #c9e8de; } 57% { background-color: #f0f2f0; } 85% { background-color: #c9e8de; } } @keyframes cloudflash { 49% { background-color: #c9e8de; } 51% { background-color: #f0f2f0; } 53% { background-color: #c9e8de; } 57% { background-color: #f0f2f0; } 85% { background-color: #c9e8de; } } @-webkit-keyframes rain { 10% { opacity: .4; } 50% { opacity: 1; } -webkit-transform: translate(-0.1em, 0.1em); The transform: translate (0.5-0.1 em, em); } } @keyframes rain { 10% { opacity: .4; } 50% { opacity: 1; } -webkit-transform: translate(-0.1em, 0.1em); The transform: translate (0.5-0.1 em, em); }} @-webkit-keyframes move {50% {-webkit-transform: translateX(-0.05em); The transform: translateX em (0.05); }} @keyframes move {50% {-webkit-transform: translateX(-0.05em); The transform: translateX em (0.05); }}Copy the code
  




Supermoon


<! -- html -->
<div class="weather">
    <div class="supermoon">
        <span class="moon"></span>
        <span class="meteor"></span>
    </div>
</div>
Copy the code



View sunny CSS source code

    .weather { width: 100%; font-size: -webkit-calc(1em); font-size: calc(1em); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; font-family: 'Work Sans', sans-serif; background: #212125; color: #e6e8db; } .supermoon { -webkit-box-flex: 0; -webkit-flex: block; -ms-flex: block; flex: block; display: block; position: relative; font-size: -webkit-calc(11em); font-size: calc(11em); width: 1em; height: 1em; margin: .3em; border-radius: 100%; -webkit-box-shadow: 0 0 0 0.0em currentColor inset, 0 0 0.3em-0.03em #5133a5; Box-shadow: 0 0 0 0.05em currentColor Inset, 0 0 0.3 em-0.03 em #5133a5; background: -webkit-gradient(linear, from(#4054b2), to(#aa4cba)); background: -webkit-linear-gradient(bottom right, #4054b2 0%, #aa4cba 65%); background: linear-gradient(to bottom right, #4054b2 0%, #aa4cba 65%); } .supermoon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: -webkit-radial-gradient(1px 1px at 50% 20%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 1px at 30% 65%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(2px 2px at 15% 5%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(2px 2px at 37% 35%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(2px 2px at 65% 47%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 1px at 42% 29%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 1px at 73% 56%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 1px at 24% 19%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(2px 2px at 31% 47%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 1px at 18% 39%, #fff, rgba(0, 0, 0, 0)); background-image: radial-gradient(1px 1px at 50% 20%, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 30% 65%, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 15% 5%, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 37% 35%, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 65% 47%, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 42% 29%, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 73% 56%, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 24% 19%, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 31% 47%, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 18% 39%, #fff, rgba(0, 0, 0, 0)); background-repeat: repeat; will-change: transform; -webkit-animation: revolve 120000ms linear infinite; animation: revolve 120000ms linear infinite; } .moon { position: absolute; top: 20%; left: 80%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 40%; height: 40%; border-radius: 100%; background: -webkit-radial-gradient(bottom left, circle, currentColor, #fef07e); background: radial-gradient(circle at bottom left, currentColor, #fef07e); -webkit-box-shadow: 0 0 0 0.02em currentColor inset, 0 0 0.3em-0.03em # aa4CBA; Box-shadow: 0 0 0 0.02em currentColor Inset, 0 0 0.3em-0.03em # aa4CBA; } .moon::before, .moon::after { content: ''; position: absolute; border-radius: 100%; background-color: #4054b2; -webkit-box-shadow: 0.01em 0.01em 0.1em 0 # 4054B2; Box-shadow: 0.01em 0.01em 0.1em 0 # 4054B2; } .moon::before { top: 15%; left: 55%; width: 20%; height: 20%; opacity: .3; } .moon::after { bottom: 50%; left: 25%; width: 15%; height: 15%; opacity: .2; } .meteor { position: absolute; background-color: #fff; opacity: 0; top: 20%; left: 55%; width: 1px; height: 15px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); will-change: transform, opacity; -webkit-animation: meteor 6250ms infinite ease-in; animation: meteor 6250ms infinite ease-in; } @-webkit-keyframes revolve { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes revolve { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes meteor { 5% { opacity: 1; {-webkit-transform: translate(-0.6em, 0.6em) rotate(45deg); The transform: translate (0.6-0.6 em, em) rotate (45 deg); opacity: 0; } } @keyframes meteor { 5% { opacity: 1; {-webkit-transform: translate(-0.6em, 0.6em) rotate(45deg); The transform: translate (0.6-0.6 em, em) rotate (45 deg); opacity: 0; }}Copy the code
  




Analysis of the


The following is a brief description of the important attributes used




Linear-gradient: Used to create an image with a linear gradient. The background gradient here is implemented by this property;






Box-shadow: Adds one or more shadows to the box. You can set horizontal, vertical, inner, outer, and so on. The aura here is implemented by this property;






Animation: Animation property, which can specify animation time, speed curve, playback times, etc. All of the animation here is done by this property;






Will-change: Provides web developers with a way to inform browsers about changes to elements so that browsers can optimize them before they actually change. The rain, snow, and meteor effects here use this property.






radial-gradient: This function creates aTo show the color gradient radiating from the origin (gradient center). Here the galaxy effect is implemented by this property.




Draw together


With some of the important attributes introduced above, it’s time to implement the Cloudy effect step by step.


The first step


Make a black background, because the black visual contrast is great. Here, LINEAR-gradient is used to make a gradual circle and center it vertically and horizontally on the canvas.


  


// html

<div class="weather">
    <div class="cloudy">
    </div>
</div>
Copy the code


// css

.weather {
  width: 100%;
  height: 500px;
  background: # 212125;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.cloudy {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  background: linear-gradient(to top right, #1b9ce2 0, #e0e2e5 90%);
}
Copy the code


The second step


Let’s do the aperture, it’s kind of a blur, we’re using box-shadow, and in our example we’re using a property called currentColor, which inherits the color value of the parent class.


  


// css

.weather {
  ...
  color: #e6e8db;
}

.cloudy {
  ...
  box-shadow: 0 0 0 10px currentColor inset,0 0 100px -10px #c9e8de;
}
Copy the code


The third step


Let’s make a cloud, which uses the pseudo element, so a cloud only needs one DOM.


  


// html

<div class="weather">
    <div class="cloudy">
        <span class="cloud"></span>
    </div>
</div>
Copy the code


// css

.cloud {
  position: absolute;
  top: 25%;
  left: 40%;
  width: 100px;
  height: 30px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 0 20px 10px currentColor inset,0 0 100px -10px #c9e8de;
}
.cloud::before {
  left: 15px;
  height: 50px;
  width: 50px;
}
.cloud::after {
  left: 45px;
  height: 35px;
  width: 35px;
}
.cloud::before, .cloud::after {
  content: ' ';
  position: inherit;
  border-radius: 100%;
  background-color: inherit;
  box-shadow: inherit;
  bottom: 40%;
}
Copy the code


The fourth step


Make the clouds move!!


  


// css .cloud { ... animation: move 4000ms infinite ease-in-out; } @keyframes move { 50% { transform: translateX(-10px); }}Copy the code


conclusion


More interesting works need to be discovered and created by more people. I hope more people can maintain the front-end ecosystem and make it better and better. If you are interested in this work, you can click “favorites”, or scan the code to follow the wechat official account “Incredible Front end”, which will share technical dry goods, best practices and interesting front end every month.