A tutorial on using pure CSS to create a weather icon for driving pictures

Static weather icons Look stiff, then share a very creative use of 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! This article we mainly share with you the use of pure CSS-driven painting of the weather icon Method Tutorial, hope to help everyone.

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

　　STEP1: Overall HTML schema STEP2: Draw the cloud icon with CSS CSS code 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.56　　25em #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.375　　Em-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.1　　25em 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 RGB　　A (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; }　　}