<link href='https://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
<a id="view-code" href="https://codepen.io/virgilpana/pen/VYEGGp" target="_blank">VIEW CODE</a>
<div id="icon">
<div id="sun">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g>
<circle style="fill:none;" cx="84.5" cy="84" r="38.4"/>
<line style="fill:none;" x1="85" y1="139.4" x2="85" y2="158"/>
<line style="fill:none;" x1="85" y1="10.9" x2="85" y2="28.3"/>
<line style="fill:none;" x1="123.8" y1="123.3" x2="137" y2="136.5"/>
<line style="fill:none;" x1="33" y1="32.4" x2="45.3" y2="44.8"/>
<line style="fill:none;" x1="46.1" y1="123.3" x2="33" y2="136.5"/>
<line style="fill:none;" x1="137" y1="32.4" x2="124.7" y2="44.8"/>
<line style="fill:none;" x1="30.1" y1="84.5" x2="11.4" y2="84.5"/>
<line style="fill:none;" x1="158.6" y1="84.5" x2="141.1" y2="84.5"/>
</g>
</svg>
</div>
<div id="cloud-wrapper">
<svg version="1.1" id="cloud-mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g>
<path id="cloud-path" d="M201.1,165.1c21.5,0,38.9-17.4,38.9-38.9c0-17.8-12-32.8-28.3-37.4c0-0.5,0.1-1,0.1-1.4
c0-35.3-28.6-64-64-64c-21.9,0-41.2,11-52.7,27.8c-4.8-3.8-10.9-6.1-17.5-6.1c-15.6,0-28.2,12.6-28.2,28.2c0,2.3,0.3,4.5,0.8,6.6
C27.8,81.2,10,99.8,10,122.5c0,23.6,19.1,42.6,42.6,42.6"/>
</g>
</svg>
<svg version="1.1" id="cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g>
<path id="cloud-path" d="M201.1,165.1c21.5,0,38.9-17.4,38.9-38.9c0-17.8-12-32.8-28.3-37.4c0-0.5,0.1-1,0.1-1.4
c0-35.3-28.6-64-64-64c-21.9,0-41.2,11-52.7,27.8c-4.8-3.8-10.9-6.1-17.5-6.1c-15.6,0-28.2,12.6-28.2,28.2c0,2.3,0.3,4.5,0.8,6.6
C27.8,81.2,10,99.8,10,122.5c0,23.6,19.1,42.6,42.6,42.6"/>
<path style="fill:none;" id="open-cloudL" d="M52.6,165.1H127"/>
<path style="fill:none;" id="open-cloudR" d="M201.1,165.1H125"/>
</g>
</svg>
</div>
<div id="rain-mask">
<svg id="rain" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="219.1px" height="417.1px" viewBox="0 0 219.1 417.1" style="enable-background:new 0 0 219.1 417.1;" xml:space="preserve">
<line style="fill:none;" x1="112.4" y1="14.5" x2="13.6" y2="383.9"/>
<line style="fill:none;" x1="188.8" y1="14.5" x2="90" y2="383.9"/>
<line style="fill:none;" x1="144" y1="38.3" x2="45.3" y2="407.7"/>
</svg>
</div>
</div>
<div id="lightning"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>body{
background:#f27935;
-webkit-transition: all 800ms ease-in-out;
-moz-transition: all 800ms ease-in-out;
-o-transition: all 800ms ease-in-out;
transition: all 800ms ease-in-out;
}
#lightning{
background:#fff;
opacity:0.8;
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#cloud-path{
fill:#f27935;
-webkit-transition: all 800ms ease-in-out;
-moz-transition: all 800ms ease-in-out;
-o-transition: all 800ms ease-in-out;
transition: all 800ms ease-in-out;
}
.rain #cloud-path{
fill:#36495c;
-webkit-transition: all 800ms ease-in-out;
-moz-transition: all 800ms ease-in-out;
-o-transition: all 800ms ease-in-out;
transition: all 800ms ease-in-out;
}
.rain{
background:#36495c;
-webkit-transition: all 800ms ease-in-out;
-moz-transition: all 800ms ease-in-out;
-o-transition: all 800ms ease-in-out;
transition: all 800ms ease-in-out;
}
.rain #cloud-mask path{
stroke:#36495c;
-webkit-transition: all 800ms ease-in-out;
-moz-transition: all 800ms ease-in-out;
-o-transition: all 800ms ease-in-out;
transition: all 800ms ease-in-out;
}
#cloud-mask path{
stroke:#fff;
stroke-width:25px;
-webkit-transition: all 800ms ease-in-out;
-moz-transition: all 800ms ease-in-out;
-o-transition: all 800ms ease-in-out;
transition: all 800ms ease-in-out;
}
#view-code{
color:#fff;
opacity:0.6;
text-transform:uppercase;
font:700 15px "Open Sans", sans-serif;
text-decoration:none;
position:absolute;top:540px; left:50%;margin-left:-40px;
}
#view-code:hover{opacity:1;}
#icon{
position:absolute;
top:180px;
left:50%;
width:300px;
height:300px;
margin-left:-150px;
}
.path{
stroke-dashoffset: 516;
-webkit-animation: fill 5s linear forwards;
-moz-animation: fill 5s linear forwards;
animation: fill 5s linear forwards;
stroke-dasharray: 40;
}
#sun{
}
#cloud-wrapper, #rain-mask{
position: absolute;
top: 30px;
left: 24px;
}
#cloud-mask path{
stroke:#f27935;
stroke-width:30px;
}
#cloud-wrapper svg{
position: absolute;
top: 0px;
left: 0px;
}
#sun{
position:relative;
overflow:hidden;
height:170px;
margin-top: 0px;
margin-left: 0px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#sun.animatepos1{
margin-top: -16px;
margin-left: -21px;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
#sun.animatepos2{
margin-top: 53px;
margin-left: 60px;
height:130px;
-webkit-transition: all 600ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-o-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
#sun line,
#sun circle,
#cloud path,
#rain line{
stroke:#fff;
stroke-width:13px;
stroke-linecap:round;
}
#rain line{
position:absolute;
top:0;
left:0;
stroke-dasharray: 20,29;
}
#rain{
position:absolute;
top: -397px;
left: 100px;
}
#rain-mask.animate #rain{
top: 155px;
left: -40px;
-webkit-transition: all 1500ms linear;
-moz-transition: all 1500ms linear;
-o-transition: all 1500ms linear;
transition: all 1500ms linear;
}
#open-cloudL{
stroke-dasharray: 400;
stroke-dashoffset: 0;
}
.animate #open-cloudL, .animate #open-cloudR{
animation: fill 1s ease-in-out forwards;
-webkit-animation: fill 1s ease-in-out forwards;
-moz-animation: fill 1s ease-in-out forwards;
animation: fill 1s ease-in-out forwards;
}
#open-cloudR{
stroke-dasharray: 400;
stroke-dashoffset: 0;
}
.animate2 #open-cloudR, .animate2 #open-cloudL{
animation: fill-out 1s ease-in-out forwards;
-webkit-animation: fill-out 1s ease-in-out forwards;
-moz-animation: fill-out 1s ease-in-out forwards;
animation: fill-out 1s ease-in-out forwards;
}
#rain-mask{
position: absolute;
top: 125px;
left: 10px;
width: 213px;
height: 132px;
overflow: hidden;
}
@-webkit-keyframes fill {
to {
stroke-dashoffset: 400;
}
}
@-moz-keyframes fill {
to {
stroke-dashoffset: 400;
}
}
@keyframes fill {
to {
stroke-dashoffset: 400;
}
}
@-webkit-keyframes fill-out {
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes fill-out {
to {
stroke-dashoffset: 0;
}
}
@keyframes fill-out {
to {
stroke-dashoffset: 0;
}
}$(document).ready(function(){
makeRain();
setInterval(function(){
makeRain();
}, 6000);
});
function rain(){
$('body').addClass("rain");
setTimeout(function(){
$("#lightning").show();
setTimeout(function(){
$("#lightning").css({opacity:0.2});
setTimeout(function(){
$("#lightning").css({opacity:0.8});
setTimeout(function(){
$("#lightning").hide();
}, 100);
}, 100);
}, 100);
}, 1200);
$('#sun').addClass("animatepos1");
$("html body").animate({ backgroundColor: "#000000" }, 1000);
$('#cloud-wrapper').removeClass("animate2").addClass('animate');
setTimeout(function(){
$('#sun').removeClass("animatepos1").addClass("animatepos2");
setTimeout(function(){$('#rain-mask').addClass("animate");}, 700);
}, 400);
}
function sunny(){
$('body').removeClass("rain");
$('#open-cloudR, #open-cloudL').css('stroke-dashoffset', 400);
$('#cloud-wrapper').addClass("animate2");
setTimeout(function(){
$('#sun').removeClass("animatepos2").addClass("animatepos1");
setTimeout(function(){
$('#sun').removeClass("animatepos1");
$('#open-cloudR, #open-cloudL').css('stroke-dashoffset', 0);
$('#rain-mask').removeClass("animate");
}, 400);
}, 300);
}
function makeRain(){
rain();
setTimeout(function(){
sunny();
}, 2600);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.