<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="sunny"></div>
<h2>Sunny</h2>
<div class="partly_cloudy">
<div class="partly_cloudy__sun"></div>
<div class="partly_cloudy__cloud"></div>
</div>
<h2>Partly cloudy</h2>
<div class="cloudy"></div>
<h2>Cloudy</h2>
<div class="rainy">
<div class="rainy__cloud"></div>
<div class="rainy__rain"></div>
</div>
<h2>Rainy</h2>
<div class="thundery">
<div class="thundery__cloud"></div>
<div class="thundery__rain"></div>
</div>
<h2>Thundery</h2>
* {
box-sizing: border-box;
}
html {
height: 100%;
margin: 0;
padding: 0;
font-size: 18px;
font-family: Arial, sans-serif;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 100%;
margin: 0;
padding: 0;
color: #8f90a3;
background-color: #232435;
background-image: -webkit-linear-gradient(45deg, #232435, #35415f);
background-image: linear-gradient(45deg, #232435, #35415f);
background-attachment: fixed;
}
h2 {
margin-bottom: 4rem;
font-size: 1rem;
text-transform: uppercase;
}
.sunny {
position: relative;
width: 5rem;
height: 5rem;
margin-top: 4rem;
}
.sunny:before,
.partly_cloudy__sun:before {
content: "";
position: absolute;
height: 80%;
width: 80%;
top: 10%;
right: 10%;
border-radius: 50%;
z-index: 2;
background-color: #f1c40f;
background-image: -webkit-radial-gradient(#f1c40f, #f39c12);
background-image: radial-gradient(#f1c40f, #f39c12);
box-shadow: 0 0 25px #917508;
}
.sunny:after,
.partly_cloudy__sun:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: 1;
background-color: #f39c12;
will-change: opacity, transform;
-webkit-animation: fadeIn 2s linear infinite reverse, scaleDown 2s linear infinite reverse;
animation: fadeIn 2s linear infinite reverse, scaleDown 2s linear infinite reverse;
}
.cloudy {
position: relative;
width: 5rem;
height: 5rem;
}
.cloudy:before,
.partly_cloudy__cloud:before,
.rainy__cloud:before,
.thundery__cloud:before {
content: "";
position: absolute;
height: 40%;
width: 40%;
top: 30%;
right: 0%;
border-radius: 50%;
border-bottom-left-radius: 0;
z-index: 2;
background-color: #ecf0f1;
background-image: -webkit-radial-gradient(#ecf0f1, #bdc3c7);
background-image: radial-gradient(#ecf0f1, #bdc3c7);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
.cloudy:after,
.partly_cloudy__cloud:after,
.rainy__cloud:after,
.thundery__cloud:after {
content: "";
position: absolute;
height: 60%;
width: 70%;
top: 10%;
right: 30%;
border-radius: 50%;
border-bottom-right-radius: 0;
z-index: 1;
background-color: #ecf0f1;
background-image: -webkit-radial-gradient(#ecf0f1, #bdc3c7);
background-image: radial-gradient(#ecf0f1, #bdc3c7);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
.partly_cloudy {
position: relative;
width: 5rem;
height: 5rem;
}
.partly_cloudy__sun {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.partly_cloudy__cloud {
position: absolute;
width: 60%;
height: 60%;
top: 40%;
z-index: 2;
will-change: transform;
-webkit-animation: translateUp 2s linear infinite alternate;
animation: translateUp 2s linear infinite alternate;
}
.rainy,
.thundery {
position: relative;
width: 5rem;
height: 5rem;
}
.rainy__cloud,
.thundery__cloud {
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
}
.rainy__cloud:before,
.thundery__cloud:before {
background-color: #95a5a6;
background-image: -webkit-radial-gradient(#95a5a6, #7f8c8d);
background-image: radial-gradient(#95a5a6, #7f8c8d);
}
.rainy__cloud:after,
.thundery__cloud:after {
background-color: #95a5a6;
background-image: -webkit-radial-gradient(#95a5a6, #7f8c8d);
background-image: radial-gradient(#95a5a6, #7f8c8d);
}
.rainy__rain,
.thundery__rain {
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
overflow: hidden;
}
.rainy__rain:before,
.thundery__rain:before {
content: "";
position: absolute;
height: 80%;
width: 20%;
top: 20%;
right: 50%;
z-index: 1;
background-image: -webkit-linear-gradient(transparent, #94cdd1);
background-image: linear-gradient(transparent, #94cdd1);
will-change: opacity, transform;
-webkit-animation: fadeIn 1s ease-out infinite reverse, scaleUp 1s ease-out infinite;
animation: fadeIn 1s ease-out infinite reverse, scaleUp 1s ease-out infinite;
}
.rainy__rain:after,
.thundery__rain:after {
content: "";
position: absolute;
height: 60%;
width: 20%;
top: 40%;
right: 20%;
z-index: 1;
opacity: 0;
background-image: -webkit-linear-gradient(transparent, #94cdd1);
background-image: linear-gradient(transparent, #94cdd1);
will-change: opacity, transform;
-webkit-animation: fadeIn 2s ease-out .4s infinite reverse, scaleUp 2s ease-out .4s infinite;
animation: fadeIn 2s ease-out .4s infinite reverse, scaleUp 2s ease-out .4s infinite;
}
.thundery__cloud:before {
background-color: #4d5656;
background-image: -webkit-radial-gradient(#4d5656, #393c3c);
background-image: radial-gradient(#4d5656, #393c3c);
-webkit-animation: thunder 4s linear .02s infinite alternate;
animation: thunder 4s linear .02s infinite alternate;
}
.thundery__cloud:after {
background-color: #4d5656;
background-image: -webkit-radial-gradient(#4d5656, #393c3c);
background-image: radial-gradient(#4d5656, #393c3c);
-webkit-animation: thunder 4s linear infinite alternate;
animation: thunder 4s linear infinite alternate;
}
.thundery__rain:before {
-webkit-animation: fadeIn .5s ease-out infinite reverse, scaleUp .5s ease-out infinite;
animation: fadeIn .5s ease-out infinite reverse, scaleUp .5s ease-out infinite;
}
.thundery__rain:after {
-webkit-animation: fadeIn .75s ease-out .2s infinite reverse, scaleUp .75s ease-out .2s infinite;
animation: fadeIn .75s ease-out .2s infinite reverse, scaleUp .75s ease-out .2s infinite;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes scaleDown {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes scaleDown {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@-webkit-keyframes translateUp {
0% {
-webkit-transform: translatey(15%);
transform: translatey(15%);
}
100% {
-webkit-transform: translatey(0);
transform: translatey(0);
}
}
@keyframes translateUp {
0% {
-webkit-transform: translatey(15%);
transform: translatey(15%);
}
100% {
-webkit-transform: translatey(0);
transform: translatey(0);
}
}
@-webkit-keyframes scaleUp {
0% {
-webkit-transform: scaley(0);
transform: scaley(0);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes scaleUp {
0% {
-webkit-transform: scaley(0);
transform: scaley(0);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-webkit-keyframes thunder {
0% {
box-shadow: 0 0 25px #fff;
}
2% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
49% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
50% {
box-shadow: 0 0 25px #fff;
}
52% {
box-shadow: 0 0 25px #f7db6e;
}
53% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
69% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
70% {
box-shadow: 0 0 25px #fff;
}
71% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
75% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
76% {
box-shadow: 0 0 25px #fff;
}
77% {
box-shadow: 0 0 25px #a8d3f0;
}
78% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
100% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
}
@keyframes thunder {
0% {
box-shadow: 0 0 25px #fff;
}
2% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
49% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
50% {
box-shadow: 0 0 25px #fff;
}
52% {
box-shadow: 0 0 25px #f7db6e;
}
53% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
69% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
70% {
box-shadow: 0 0 25px #fff;
}
71% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
75% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
76% {
box-shadow: 0 0 25px #fff;
}
77% {
box-shadow: 0 0 25px #a8d3f0;
}
78% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
100% {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
}
