How to implement the weather icon of the drawing by pure CSS

Static weather icon to see a long time appears stiff, then share a very creative with the CSS to achieve weather-driven picture of the weather icon, the code is shared, with this example as a reference hope you can be inspired. enjoy!

Let's do a rain weather icon example, the process is actually very simple oh.

STEP1: Overall HTML architecture

<div class= "icon Rainy" >

<div class= "Cloud" ></div>

<div class= "Rain" ></div>

</div>

STEP2: Draw cloud icon with CSS

The CSS code is as follows

Body {

Max-width:42em;

Padding:2em;

margin:0 Auto;

Color: #161616;

font-family: ' Roboto ', Sans-serif;

Text-align:center;

Background-color:currentcolor;

}

. Icon {

position:relative;

Display:inline-block;

Width:12em;

Height:10em;

Font-size:1em; /* Control icon size HERE/*

}

. Cloud {

Position:absolute;

Z-index:1;

top:50%;

left:50%;

Width:3.6875em;

Height:3.6875em;

margin: -1.84375em;

Background:currentcolor;

border-radius:50%;

Box-shadow:

-2.1875em 0.6875em 0-0.6875em,

2.0625em 0.9375em 0-0.9375em,

0 0 0 0.375em #fff,

-2.1875em 0.6875em 0-0.3125em #fff,

2.0625em 0.9375em 0-0.5625em #fff;

}

. cloud:after {

Content: ';

Position:absolute;

bottom:0;

Left: -0.5em;

Display:block;

Width:4.5625em;

Height:1em;

Background:currentcolor;

box-shadow:0 0.4375em 0-0.0625em #fff;

}

. Cloud:nth-child (2) {

z-index:0;

Background: #fff;

Box-shadow:

-2.1875em 0.6875em 0-0.6875em #fff,

2.0625em 0.9375em 0-0.9375em #fff,

0 0 0 0.375em #fff,

-2.1875em 0.6875em 0-0.3125em #fff,

2.0625em 0.9375em 0-0.5625em #fff;

opacity:0.3;

Transform:scale (0.5) Translate (6em, -3em);

Animation:cloud 4s linear infinite;

}

. Cloud:nth-child (2): After {background: #fff;}

. rain{

Position:absolute;

Z-index:2;

top:50%;

left:50%;

Width:3.75em;

Height:3.75em;

Margin:0.375em 0 0-2em;

Background:currentcolor;

}

. rain:after {

Content: ';

Position:absolute;

Z-index:2;

top:50%;

left:50%;

Width:1.125em;

Height:1.125em;

Margin: -1em 0 0-0.25em;

Background: #0cf;

border-radius:100% 0 60% 50%/60% 0 100% 50%;

Box-shadow:

0.625em 0.875em 0-0.125em Rgba (255,255,255,0.2),

-0.875em 1.125em 0-0.125em Rgba (255,255,255,0.2),

-1.375em-0.125em 0 Rgba (255,255,255,0.2);

Transform:rotate ( -28DEG);

Animation:rain 3s linear infinite; /* Set Animation rain */

}

STEP3: Rain Animation

/* Rain Animation animations * *

@keyframes Rain {

0% {

Background: #0cf;

Box-shadow:

0.625em 0.875em 0-0.125em Rgba (255,255,255,0.2),

-0.875em 1.125em 0-0.125em Rgba (255,255,255,0.2),

-1.375em-0.125em 0 #0cf;

}

25% {

Box-shadow:

0.625em 0.875em 0-0.125em Rgba (255,255,255,0.2),

-0.875em 1.125em 0-0.125em #0cf,

-1.375em-0.125em 0 Rgba (255,255,255,0.2);

}

50% {

Background:rgba (255,255,255,0.3);

Box-shadow:

0.625em 0.875em 0-0.125em #0cf,

-0.875em 1.125em 0-0.125em Rgba (255,255,255,0.2),

-1.375em-0.125em 0 Rgba (255,255,255,0.2);

}

100% {

Box-shadow:

0.625em 0.875em 0-0.125em Rgba (255,255,255,0.2),

-0.875em 1.125em 0-0.125em Rgba (255,255,255,0.2),

-1.375em-0.125em 0 #0cf;

}

}

Best Picture effect: