<style type=
"text/css"
>
*{
margin
:
0
,
padding
:
0
;}
body {
overflow
:
hidden
;
background
:
#c9dbe9
;
background
: -linear-gradient(
top
,
#c9dbe9
0%
,
#fff
100%
);
background
: -webkit-linear-gradient(
top
,
#c9dbe9
0%
,
#fff
100%
);
background
: -moz-linear-gradient(
top
,
#c9dbe9
0%
,
#fff
100%
);
}
.drop {
background
:-webkit-gradient(linear,
0%
0%
,
0%
100%
, from(rgba(
255
,
255
,
255
,
1
) ), to(rgba(
255
,
255
,
255
,
0.6
)) );
background
: -moz-linear-gradient(
top
, rgba(
13
,
52
,
58
,
1
)
0%
, rgba(
255
,
255
,
255
,.
6
)
100%
);
width
:
1px
;
height
:
89px
;
position
:
absolute
;
bottom
:
200px
;
-webkit-animation: fall
1
s linear infinite;
-moz-animation: fall
1
s linear infinite;
}
#clouds {
padding
:
100px
0
;
}
.cloud {
width
:
200px
;
height
:
60px
;
background
:
#fff
;
border-radius:
200px
;
-moz-border-radius:
200px
;
-webkit-border-radius:
200px
;
position
:
relative
;
}
.cloud:before, .cloud:after {
content
:
''
;
position
:
absolute
;
top
:
-15px
;
left
:
10px
;
background
:
#fff
;
width
:
100px
;
height
:
80px
;
border-radius:
100px
;
-moz-border-radius:
100px
;
-webkit-border-radius:
100px
;
transform: rotate(
30
deg);
-webkit-transform: rotate(
30
deg);
-moz-transform: rotate(
30
deg);
}
.cloud:after {
width
:
120px
;
height
:
120px
;
top
:
-55px
;
left
:
auto
;
right
:
15px
;
}
.x
1
{
-webkit-animation: moveclouds
15
s linear infinite;
-moz-animation: moveclouds
15
s linear infinite;
}
.x
2
{
left
:
200px
;
-webkit-transform: scale(
0.6
);
-moz-transform: scale(
0.6
);
opacity:
0.6
;
-webkit-animation: moveclouds
25
s linear infinite;
-moz-animation: moveclouds
25
s linear infinite;
}
.x
3
{
left
:
-250px
;
top
:
-200px
;
-webkit-transform: scale(
0.8
);
-moz-transform: scale(
0.8
);
opacity:
0.8
;
-webkit-animation: moveclouds
20
s linear infinite;
-moz-animation: moveclouds
20
s linear infinite;
}
.x
4
{
left
:
470px
;
top
:
-250px
;
-webkit-transform: scale(
0.75
);
-moz-transform: scale(
0.75
);
opacity:
0.75
;
-webkit-animation: moveclouds
18
s linear infinite;
-moz-animation: moveclouds
18
s linear infinite;
}
.x
5
{
left
:
-150px
;
top
:
-150px
;
-webkit-transform: scale(
0.8
);
-moz-transform: scale(
0.8
);
opacity:
0.8
;
-webkit-animation: moveclouds
20
s linear infinite;
-moz-animation: moveclouds
20
s linear infinite;
}
@-webkit-keyframes moveclouds {
۰%
{
margin-left
:
1000px
;}
۱۰۰%
{
margin-left
:
-1000px
;}
}
@-moz-keyframes moveclouds {
۰%
{
margin-left
:
1000px
;}
۱۰۰%
{
margin-left
:
-1000px
;}
}
@-webkit-keyframes fall {
to {
margin-top
:
900px
;}
}
@-moz-keyframes fall {
to {
margin-top
:
900px
;}
}
</style>