Rain Rain go away, come again another day :)
##How to?
You know there is very less HTML interaction in it, Create one <div> say i created <div class="rainy"></div> to play with css around it.
I have used -prefix-free to work behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
Rest is css
.rainy {
-webkit-animation: rainy 5s ease-in-out infinite 1s;
animation: rainy 5s ease-in-out infinite 1s;
background: #CCCCCC;
border-radius: 50%;
-webkit-box-shadow:
#CCCCCC 65px -15px 0 -5px,
#CCCCCC 25px -25px,
#CCCCCC 30px 10px,
#CCCCCC 60px 15px 0 -10px,
#CCCCCC 85px 5px 0 -5px;
box-shadow:
#CCCCCC 65px -15px 0 -5px,
#CCCCCC 25px -25px,
#CCCCCC 30px 10px,
#CCCCCC 60px 15px 0 -10px,
#CCCCCC 85px 5px 0 -5px;
display: inline-block;
height: 50px;
width: 50px;
}
.rainy:after {
-webkit-animation: rainy_shadow 5s ease-in-out infinite 1s;
animation: rainy_shadow 5s ease-in-out infinite 1s;
background: #000000;
border-radius: 50%;
content: '';
height: 15px;
width: 120px;
opacity: 0.2;
position: absolute;
left: 5px;
bottom: -60px;
-webkit-transform: scale(.7);
-ms-transform: scale(.7);
transform: scale(.7);
}
.rainy:before {
-webkit-animation: rainy_rain .7s infinite linear;
animation: rainy_rain .7s infinite linear;
content: '';
background: #CCCCCC;
border-radius: 50%;
display: block;
height: 6px;
width: 3px;
opacity: 0.3;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
@-webkit-keyframes rainy {
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes rainy {
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@-webkit-keyframes rainy_shadow {
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }
}
@keyframes rainy_shadow {
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }
}
@-webkit-keyframes rainy_rain {
0% {
-webkit-box-shadow:
rgba(0,0,0,0) 30px 30px,
rgba(0,0,0,0) 40px 40px,
#000 50px 75px,
#000 55px 50px,
#000 70px 100px,
#000 80px 95px,
#000 110px 45px,
#000 90px 35px;
box-shadow:
rgba(0,0,0,0) 30px 30px,
rgba(0,0,0,0) 40px 40px,
#000 50px 75px,
#000 55px 50px,
#000 70px 100px,
#000 80px 95px,
#000 110px 45px,
#000 90px 35px;
}
25% {
-webkit-box-shadow:
#000 30px 45px,
#000 40px 60px,
#000 50px 90px,
#000 55px 65px,
rgba(0,0,0,0) 70px 120px,
rgba(0,0,0,0) 80px 120px,
#000 110px 70px,
#000 90px 60px;
box-shadow:
#000 30px 45px,
#000 40px 60px,
#000 50px 90px,
#000 55px 65px,
rgba(0,0,0,0) 70px 120px,
rgba(0,0,0,0) 80px 120px,
#000 110px 70px,
#000 90px 60px;
}
26% {
-webkit-box-shadow:
#000 30px 45px,
#000 40px 60px,
#000 50px 90px,
#000 55px 65px,
rgba(0,0,0,0) 70px 40px,
rgba(0,0,0,0) 80px 20px,
#000 110px 70px,
#000 90px 60px;
box-shadow:
#000 30px 45px,
#000 40px 60px,
#000 50px 90px,
#000 55px 65px,
rgba(0,0,0,0) 70px 40px,
rgba(0,0,0,0) 80px 20px,
#000 110px 70px,
#000 90px 60px;
}
50% {
-webkit-box-shadow:
#000 30px 70px,
#000 40px 80px,
rgba(0,0,0,0) 50px 100px,
#000 55px 80px,
#000 70px 60px,
#000 80px 45px,
#000 110px 95px,
#000 90px 85px;
box-shadow:
#000 30px 70px,
#000 40px 80px,
rgba(0,0,0,0) 50px 100px,
#000 55px 80px,
#000 70px 60px,
#000 80px 45px,
#000 110px 95px,
#000 90px 85px;
}
51% {
-webkit-box-shadow:
#000 30px 70px,
#000 40px 80px,
rgba(0,0,0,0) 50px 45px,
#000 55px 80px,
#000 70px 60px,
#000 80px 45px,
#000 110px 95px,
#000 90px 85px;
box-shadow:
#000 30px 70px,
#000 40px 80px,
rgba(0,0,0,0) 50px 45px,
#000 55px 80px,
#000 70px 60px,
#000 80px 45px,
#000 110px 95px,
#000 90px 85px;
}
75% {
-webkit-box-shadow:
#000 30px 95px,
#000 40px 100px,
#000 50px 60px,
rgba(0,0,0,0) 55px 95px,
#000 70px 80px,
#000 80px 70px,
rgba(0,0,0,0) 110px 120px,
rgba(0,0,0,0) 90px 110px;
box-shadow:
#000 30px 95px,
#000 40px 100px,
#000 50px 60px,
rgba(0,0,0,0) 55px 95px,
#000 70px 80px,
#000 80px 70px,
rgba(0,0,0,0) 110px 120px,
rgba(0,0,0,0) 90px 110px;
}
76% {
-webkit-box-shadow:
#000 30px 95px,
#000 40px 100px,
#000 50px 60px,
rgba(0,0,0,0) 55px 35px,
#000 70px 80px,
#000 80px 70px,
rgba(0,0,0,0) 110px 25px,
rgba(0,0,0,0) 90px 15px;
box-shadow:
#000 30px 95px,
#000 40px 100px,
#000 50px 60px,
rgba(0,0,0,0) 55px 35px,
#000 70px 80px,
#000 80px 70px,
rgba(0,0,0,0) 110px 25px,
rgba(0,0,0,0) 90px 15px;
}
100% {
-webkit-box-shadow:
rgba(0,0,0,0) 30px 120px,
rgba(0,0,0,0) 40px 120px,
#000 50px 75px,
#000 55px 50px,
#000 70px 100px,
#000 80px 95px,
#000 110px 45px,
#000 90px 35px;
box-shadow:
rgba(0,0,0,0) 30px 120px,
rgba(0,0,0,0) 40px 120px,
#000 50px 75px,
#000 55px 50px,
#000 70px 100px,
#000 80px 95px,
#000 110px 45px,
#000 90px 35px;
}
}
@keyframes rainy_rain {
0% {
-webkit-box-shadow:
rgba(0,0,0,0) 30px 30px,
rgba(0,0,0,0) 40px 40px,
#000 50px 75px,
#000 55px 50px,
#000 70px 100px,
#000 80px 95px,
#000 110px 45px,
#000 90px 35px;
box-shadow:
rgba(0,0,0,0) 30px 30px,
rgba(0,0,0,0) 40px 40px,
#000 50px 75px,
#000 55px 50px,
#000 70px 100px,
#000 80px 95px,
#000 110px 45px,
#000 90px 35px;
}
25% {
-webkit-box-shadow:
#000 30px 45px,
#000 40px 60px,
#000 50px 90px,
#000 55px 65px,
rgba(0,0,0,0) 70px 120px,
rgba(0,0,0,0) 80px 120px,
#000 110px 70px,
#000 90px 60px;
box-shadow:
#000 30px 45px,
#000 40px 60px,
#000 50px 90px,
#000 55px 65px,
rgba(0,0,0,0) 70px 120px,
rgba(0,0,0,0) 80px 120px,
#000 110px 70px,
#000 90px 60px;
}
26% {
-webkit-box-shadow:
#000 30px 45px,
#000 40px 60px,
#000 50px 90px,
#000 55px 65px,
rgba(0,0,0,0) 70px 40px,
rgba(0,0,0,0) 80px 20px,
#000 110px 70px,
#000 90px 60px;
box-shadow:
#000 30px 45px,
#000 40px 60px,
#000 50px 90px,
#000 55px 65px,
rgba(0,0,0,0) 70px 40px,
rgba(0,0,0,0) 80px 20px,
#000 110px 70px,
#000 90px 60px;
}
50% {
-webkit-box-shadow:
#000 30px 70px,
#000 40px 80px,
rgba(0,0,0,0) 50px 100px,
#000 55px 80px,
#000 70px 60px,
#000 80px 45px,
#000 110px 95px,
#000 90px 85px;
box-shadow:
#000 30px 70px,
#000 40px 80px,
rgba(0,0,0,0) 50px 100px,
#000 55px 80px,
#000 70px 60px,
#000 80px 45px,
#000 110px 95px,
#000 90px 85px;
}
51% {
-webkit-box-shadow:
#000 30px 70px,
#000 40px 80px,
rgba(0,0,0,0) 50px 45px,
#000 55px 80px,
#000 70px 60px,
#000 80px 45px,
#000 110px 95px,
#000 90px 85px;
box-shadow:
#000 30px 70px,
#000 40px 80px,
rgba(0,0,0,0) 50px 45px,
#000 55px 80px,
#000 70px 60px,
#000 80px 45px,
#000 110px 95px,
#000 90px 85px;
}
75% {
-webkit-box-shadow:
#000 30px 95px,
#000 40px 100px,
#000 50px 60px,
rgba(0,0,0,0) 55px 95px,
#000 70px 80px,
#000 80px 70px,
rgba(0,0,0,0) 110px 120px,
rgba(0,0,0,0) 90px 110px;
box-shadow:
#000 30px 95px,
#000 40px 100px,
#000 50px 60px,
rgba(0,0,0,0) 55px 95px,
#000 70px 80px,
#000 80px 70px,
rgba(0,0,0,0) 110px 120px,
rgba(0,0,0,0) 90px 110px;
}
76% {
-webkit-box-shadow:
#000 30px 95px,
#000 40px 100px,
#000 50px 60px,
rgba(0,0,0,0) 55px 35px,
#000 70px 80px,
#000 80px 70px,
rgba(0,0,0,0) 110px 25px,
rgba(0,0,0,0) 90px 15px;
box-shadow:
#000 30px 95px,
#000 40px 100px,
#000 50px 60px,
rgba(0,0,0,0) 55px 35px,
#000 70px 80px,
#000 80px 70px,
rgba(0,0,0,0) 110px 25px,
rgba(0,0,0,0) 90px 15px;
}
100% {
-webkit-box-shadow:
rgba(0,0,0,0) 30px 120px,
rgba(0,0,0,0) 40px 120px,
#000 50px 75px,
#000 55px 50px,
#000 70px 100px,
#000 80px 95px,
#000 110px 45px,
#000 90px 35px;
box-shadow:
rgba(0,0,0,0) 30px 120px,
rgba(0,0,0,0) 40px 120px,
#000 50px 75px,
#000 55px 50px,
#000 70px 100px,
#000 80px 95px,
#000 110px 45px,
#000 90px 35px;
}
}Lets pray for the rain to stop :)