Cloud animation in the air and cloud animation in the air
Step: 1. Create five clouds;
2. Add different styles and positions to the clouds;
3. Let these clouds pass through the screen at different speeds;
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> five clouds in the sky </title>
<Style>
* {Margin: 0; padding: 0 ;}
Body {
Overflow: hidden;
}
# Clouds {
Padding: 100px 0;
Background: # c9dbe9;
Background: linear-gradient (top, # c9dbe9 0%, # fff 100% );
}
. Cloud {
Width: 200px; height: 60px;
Background: # fff;
Border-radius: 200px;
Position: relative;
}
. Cloud: before,. cloud: after {
Content :'';
Background: # fff;
Width: 100px; height: 80px;
Position: absolute; top:-15px; left: 10px;
Border-radius: 100px;
Transform: rotate (30deg );
}
. Cloud: after {
Width: 120px; height: 120px;
Top:-55px; right: 15px; left: auto;
}
. X1 {
Animation: moveclouds 15 s linear infinite;
}
. X2 {
Left: 200px;
Transform: scale (1, 0.6 );
Opacity: 0.6;
Animation: moveclouds 25 s linear infinite;
}
. X3 {
Left:-250px; top:-200px;
Transform: scale (1, 0.8 );
Opacity: 0.8;
Animation: moveclouds 20 s linear infinite;
}
. X4 {
Left: 470px; top:-250px;
Transform: scale (1, 0.75 );
Opacity: 0.75;
Animation: moveclouds 18 s linear infinite;
}
. X5 {
Left: 350px; top:-150px;
Transform: scale (1, 0.8 );
Opacity: 0.8;
Animation: moveclouds 20 s linear infinite;
}
@ Keyframes moveclouds {
0% {margin-left: 1000px ;}
100% {margin-left:-1000px ;}
}
</Style>
</Head>
<Body>
<Div id = "clouds">
<Div class = "cloud x1"> </div>
<Div class = "cloud x2"> </div>
<Div class = "cloud x3"> </div>
<Div class = "cloud x4"> </div>
<Div class = "cloud x5"> </div>
</Div>
</Body>
</Html>