|
body { |
|
font-family: 'Roboto'; |
|
color: #fff; |
|
background-color: #161616; |
|
background: url("http://static.pexels.com/wp-content/uploads/2014/06/clouds-colorful-colourful-1029.jpg") no-repeat; |
|
background-size: cover; |
|
} |
|
.weathericonpart{ |
|
background: #161616; |
|
opacity: 0.8; |
|
} |
|
.status p { |
|
font-size: 1.8em; |
|
text-transform: capitalize; |
|
} |
|
|
|
header { |
|
margin-bottom: 30px; |
|
} |
|
|
|
.temp{ |
|
cursor:pointer; |
|
color:#006dcc; |
|
} |
|
.temp:hover{ |
|
color:#005096; |
|
} |
|
h1 { |
|
font-size: 5em; |
|
} |
|
|
|
.all-icon { |
|
margin-bottom: 20px; |
|
} |
|
|
|
div.hide { |
|
display: none; |
|
} |
|
|
|
.icon { |
|
color: #161616; |
|
position: relative; |
|
display: inline-block; |
|
width: 12rem; |
|
height: 10rem; |
|
} |
|
|
|
.cloud { |
|
position: absolute; |
|
z-index: 1; |
|
top: 50%; |
|
left: 50%; |
|
width: 3.6875rem; |
|
height: 3.6875rem; |
|
margin: -1.84375rem; |
|
background: currentColor; |
|
border-radius: 50%; |
|
box-shadow: -2.1875rem 0.6875rem 0 -0.6875rem, 2.0625rem 0.9375rem 0 -0.9375rem, 0 0 0 0.375rem #fff, -2.1875rem 0.6875rem 0 -0.3125rem #fff, 2.0625rem 0.9375rem 0 -0.5625rem #fff; |
|
} |
|
|
|
.cloud:after { |
|
content: ''; |
|
position: absolute; |
|
bottom: 0; |
|
left: -0.5rem; |
|
display: block; |
|
width: 4.5625rem; |
|
height: 1rem; |
|
background: currentColor; |
|
box-shadow: 0 0.375rem #fff; |
|
} |
|
|
|
.cloud:nth-child(2) { |
|
z-index: 0; |
|
background: #fff; |
|
box-shadow: -2.1875rem 0.6875rem 0 -0.6875rem #fff, 2.0625rem 0.9375rem 0 -0.9375rem #fff, 0 0 0 0.375rem #fff, -2.1875rem 0.6875rem 0 -0.3125rem #fff, 2.0625rem 0.9375rem 0 -0.5625rem #fff; |
|
opacity: 0.3; |
|
-webkit-transform: scale(0.5) translate(6rem, -3rem); |
|
-ms-transform: scale(0.5) translate(6rem, -3rem); |
|
transform: scale(0.5) translate(6rem, -3rem); |
|
-webkit-animation: cloud 4s linear infinite; |
|
animation: cloud 4s linear infinite; |
|
} |
|
|
|
.cloud:nth-child(2):after { |
|
background: #fff; |
|
} |
|
|
|
.sun { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
width: 2.5rem; |
|
height: 2.5rem; |
|
margin: -1.25rem; |
|
background: currentColor; |
|
border-radius: 50%; |
|
box-shadow: 0 0 0 0.375rem #fff; |
|
-webkit-animation: spin 12s infinite linear; |
|
animation: spin 12s infinite linear; |
|
} |
|
|
|
.rays { |
|
position: absolute; |
|
top: -2rem; |
|
left: 50%; |
|
display: block; |
|
width: 0.375rem; |
|
height: 1.125rem; |
|
margin-left: -0.1875rem; |
|
background: #fff; |
|
border-radius: 0.25rem; |
|
box-shadow: 0 5.375rem #fff; |
|
} |
|
|
|
.rays:before, |
|
.rays:after { |
|
content: ''; |
|
position: absolute; |
|
top: 0rem; |
|
left: 0rem; |
|
display: block; |
|
width: 0.375rem; |
|
height: 1.125rem; |
|
-webkit-transform: rotate(60deg); |
|
-ms-transform: rotate(60deg); |
|
transform: rotate(60deg); |
|
-webkit-transform-origin: 50% 3.25rem; |
|
-ms-transform-origin: 50% 3.25rem; |
|
transform-origin: 50% 3.25rem; |
|
background: #fff; |
|
border-radius: 0.25rem; |
|
box-shadow: 0 5.375rem #fff; |
|
} |
|
|
|
.rays:before { |
|
-webkit-transform: rotate(120deg); |
|
-ms-transform: rotate(120deg); |
|
transform: rotate(120deg); |
|
} |
|
|
|
.cloud + .sun { |
|
margin: -2rem 1rem; |
|
} |
|
|
|
.rain, |
|
.lightning, |
|
.snow { |
|
position: absolute; |
|
z-index: 2; |
|
top: 50%; |
|
left: 50%; |
|
width: 3.75rem; |
|
height: 3.75rem; |
|
margin: 0.375rem 0 0 -2rem; |
|
background: currentColor; |
|
} |
|
|
|
.rain:after { |
|
content: ''; |
|
position: absolute; |
|
z-index: 2; |
|
top: 50%; |
|
left: 50%; |
|
width: 1.125rem; |
|
height: 1.125rem; |
|
margin: -1rem 0 0 -0.25rem; |
|
background: #0cf; |
|
border-radius: 100% 0 60% 50% / 60% 0 100% 50%; |
|
box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2); |
|
-webkit-transform: rotate(-28deg); |
|
-ms-transform: rotate(-28deg); |
|
transform: rotate(-28deg); |
|
-webkit-animation: rain 3s linear infinite; |
|
animation: rain 3s linear infinite; |
|
} |
|
|
|
.bolt { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
width: 1rem; |
|
height: 0.5rem; |
|
margin: -0.875rem 0 0 -0.5rem; |
|
color: #fff; |
|
background: #fff; |
|
opacity: 0.3; |
|
-webkit-animation: lightning 2s linear infinite; |
|
animation: lightning 2s linear infinite; |
|
} |
|
|
|
.bolt:nth-child(2) { |
|
width: 0.5rem; |
|
height: 0.25rem; |
|
margin: -1.875rem 0 0 -1.5rem; |
|
-webkit-transform: translate(2.5rem, 2.25rem); |
|
-ms-transform: translate(2.5rem, 2.25rem); |
|
transform: translate(2.5rem, 2.25rem); |
|
opacity: 0.2; |
|
-webkit-animation: lightning 1.5s linear infinite; |
|
animation: lightning 1.5s linear infinite; |
|
} |
|
|
|
.bolt:before, |
|
.bolt:after { |
|
content: ''; |
|
position: absolute; |
|
z-index: 2; |
|
top: 50%; |
|
left: 50%; |
|
margin: -1.75rem 0 0 -1.25rem; |
|
border-top: 1.25rem solid transparent; |
|
border-right: 0.75rem solid; |
|
border-bottom: 0.75rem solid; |
|
border-left: 0.5rem solid transparent; |
|
-webkit-transform: skewX(-10deg); |
|
-ms-transform: skewX(-10deg); |
|
transform: skewX(-10deg); |
|
} |
|
|
|
.bolt:after { |
|
margin: -0.25rem 0 0 -0.0125rem; |
|
border-top: 0.75rem solid; |
|
border-right: 0.5rem solid transparent; |
|
border-bottom: 1.25rem solid transparent; |
|
border-left: 0.75rem solid; |
|
-webkit-transform: skewX(-10deg); |
|
-ms-transform: skewX(-10deg); |
|
transform: skewX(-10deg); |
|
} |
|
|
|
.bolt:nth-child(2):before { |
|
margin: -0.875rem 0 0 -0.75rem; |
|
border-top: 0.625rem solid transparent; |
|
border-right: 0.375rem solid; |
|
border-bottom: 0.375rem solid; |
|
border-left: 0.25rem solid transparent; |
|
} |
|
|
|
.bolt:nth-child(2):after { |
|
margin: -0.125rem 0 0 0; |
|
border-top: 0.375rem solid; |
|
border-right: 0.25rem solid transparent; |
|
border-bottom: 0.625rem solid transparent; |
|
border-left: 0.375rem solid; |
|
} |
|
|
|
.flake:before, |
|
.flake:after { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
margin: -1.25rem 0 0 -1.25rem; |
|
content: '\2744'; |
|
color: #fff; |
|
list-height: 1em; |
|
opacity: 0.2; |
|
-webkit-animation: spin 8s linear infinite reverse; |
|
animation: spin 8s linear infinite reverse; |
|
} |
|
|
|
.flake:after { |
|
margin: -0.125rem 0 0 -1.375rem; |
|
font-size: 1.5rem; |
|
opacity: 0.4; |
|
-webkit-animation: spin 14s linear infinite; |
|
animation: spin 14s linear infinite; |
|
} |
|
|
|
.flake:nth-child(2):before { |
|
margin: -0.875rem 0 0 0.25rem; |
|
font-size: 1.25rem; |
|
opacity: 0.2; |
|
-webkit-animation: spin 10s linear infinite; |
|
animation: spin 10s linear infinite; |
|
} |
|
|
|
.flake:nth-child(2):after { |
|
margin: 0.5rem 0 0 0.125rem; |
|
font-size: 2rem; |
|
opacity: 0.4; |
|
-webkit-animation: spin 16s linear infinite reverse; |
|
animation: spin 16s linear infinite reverse; |
|
} |
|
/* Animations */ |
|
|
|
@-webkit-keyframes spin { |
|
100% { |
|
-webkit-transform: rotate(360deg); |
|
transform: rotate(360deg); |
|
} |
|
} |
|
|
|
@keyframes spin { |
|
100% { |
|
-webkit-transform: rotate(360deg); |
|
transform: rotate(360deg); |
|
} |
|
} |
|
|
|
@-webkit-keyframes cloud { |
|
0% { |
|
opacity: 0; |
|
} |
|
50% { |
|
opacity: 0.3; |
|
} |
|
100% { |
|
opacity: 0; |
|
-webkit-transform: scale(0.5) translate(-6rem, -3rem); |
|
transform: scale(0.5) translate(-6rem, -3rem); |
|
} |
|
} |
|
|
|
@keyframes cloud { |
|
0% { |
|
opacity: 0; |
|
} |
|
50% { |
|
opacity: 0.3; |
|
} |
|
100% { |
|
opacity: 0; |
|
-webkit-transform: scale(0.5) translate(-6rem, -3rem); |
|
transform: scale(0.5) translate(-6rem, -3rem); |
|
} |
|
} |
|
|
|
@-webkit-keyframes rain { |
|
0% { |
|
background: #0cf; |
|
box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf; |
|
} |
|
25% { |
|
box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem #0cf, -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2); |
|
} |
|
50% { |
|
background: rgba(255, 255, 255, 0.3); |
|
box-shadow: 0.625rem 0.875rem 0 -0.125rem #0cf, -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2); |
|
} |
|
100% { |
|
box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf; |
|
} |
|
} |
|
|
|
@keyframes rain { |
|
0% { |
|
background: #0cf; |
|
box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf; |
|
} |
|
25% { |
|
box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem #0cf, -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2); |
|
} |
|
50% { |
|
background: rgba(255, 255, 255, 0.3); |
|
box-shadow: 0.625rem 0.875rem 0 -0.125rem #0cf, -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2); |
|
} |
|
100% { |
|
box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf; |
|
} |
|
} |
|
|
|
@-webkit-keyframes lightning { |
|
45% { |
|
color: #fff; |
|
background: #fff; |
|
opacity: 0.2; |
|
} |
|
50% { |
|
color: #0cf; |
|
background: #0cf; |
|
opacity: 1; |
|
} |
|
55% { |
|
color: #fff; |
|
background: #fff; |
|
opacity: 0.2; |
|
} |
|
} |
|
|
|
@keyframes lightning { |
|
45% { |
|
color: #fff; |
|
background: #fff; |
|
opacity: 0.2; |
|
} |
|
50% { |
|
color: #0cf; |
|
background: #0cf; |
|
opacity: 1; |
|
} |
|
55% { |
|
color: #fff; |
|
background: #fff; |
|
opacity: 0.2; |
|
} |
|
} |