Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Aug 16, 2017
Embed
What would you like to do?
/r/web_design challenge 1 - CSS Weather Animations
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<div id="weather-animations">
<div class="row">
<div class="weather">
<div id="rays" class="rays"></div>
<div id="sun" class="sun"></div>
</div>
<div class="desc">sunny</div>
</div>
<br />
<div class="row">
<div class="weather">
<div id="miniRays" class="rays"></div>
<div id="miniSun" class="sun"></div>
<div id="miniCloud" class="cloud"></div>
</div>
<div class="desc">partly cloudy</div>
</div>
<br />
<div class="row">
<div class="weather">
<div id="miniDarkCloud" class="cloud"></div>
<div id="cloud" class="cloud"></div>
</div>
<div class="desc">cloudy</div>
</div>
<br />
<div class="row">
<div class="weather">
<div id="raindrop1" class="raindrop"></div>
<div id="raindrop2" class="raindrop"></div>
<div id="raindrop3" class="raindrop"></div>
<div id="raindrop4" class="raindrop"></div>
<div id="darkCloud" class="cloud"></div>
</div>
<div class="desc">rainy</div>
</div>
<br />
<div class="row">
<div class="weather">
<div id="star1" class="star"></div>
<div id="moon"></div>
<div id="star2" class="star"></div>
<div id="star3" class="star"></div>
</div>
<div class="desc">night</div>
</div>
</div>
@mixin background($colour1, $colour2) {
background: -webkit-linear-gradient($colour1, $colour2);
background: -moz-linear-gradient($colour1, $colour2);
background: -ms-linear-gradient($colour1, $colour2);
background: -o-linear-gradient($colour1, $colour2);
background: linear-gradient($colour1, $colour2);
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
@mixin rotate($degrees) {
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin scale($points) {
-webkit-transform: scale($points);
-moz-transform: scale($points);
-ms-transform: scale($points);
-o-transform: scale($points);
transform: scale($points);
}
@mixin fadeIn($seconds) {
-webkit-animation: fadein $seconds;
-moz-animation: fadein $seconds;
-ms-animation: fadein $seconds;
-o-animation: fadein $seconds;
animation: fadein $seconds;
}
$white: #FFFFFF;
$skyLight: #55C1FF;
$skyDark: #33658A;
$sunLight: #FEC601;
$sunDark: #EA7317;
$cloudLight: #DBE4EE;
$cloudDark: #A9BBCF;
$darkCloudLight: #90A7BF;
$darkCloudDark: #7792AF;
$raindrop: #0A81D1;
$nightLight: #ECE4B7;
$nightDark: #BFADA3;
html {
@include background($skyLight, $skyDark);
min-height: 100%;
}
body {
text-align: center;
#weather-animations {
display: inline-block;
width: 50%;
.row {
display: flex;
align-items: center;
height: 200px;
width: auto;
.weather {
display: inline-block;
position: relative;
width: 200px;
min-width: 200px;
height: 200px;
.rays {
background: $sunLight;
position: absolute;
z-index: 0;
@include rotate(20deg);
animation: sunRotate 10s infinite linear;
}
.rays:after {
content: "";
background: $sunLight;
position: absolute;
z-index: 0;
@include rotate(40deg);
}
.sun {
display: relative;
@include background($sunLight, $sunDark);
@include border-radius(50px);
position: absolute;
z-index: 1;
}
.cloud {
@include border-radius(50px);
position: relative;
z-index: 2;
}
.cloud:before {
content: "";
@include border-radius(50px);
position: absolute;
z-index: 2;
}
.cloud:after {
content: "";
position: absolute;
@include border-radius(50px);
z-index: 3;
}
.raindrop {
width: 5px;
height: 5px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border: 3px solid $raindrop;
background: $raindrop;
display: inline-block;
@include rotate(-45deg);
position: relative;
backface-visibility: hidden;
}
.star {
margin: 50px 0;
position: relative;
display: block;
width: 0px;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid $nightLight;
@include rotate(35deg);
@include scale(.15);
}
.star:before {
content: "";
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid $nightLight;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -60px;
display: block;
@include rotate(-35deg);
}
.star:after {
content: "";
position: absolute;
display: block;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid $nightLight;
border-left: 100px solid transparent;
@include rotate(-70deg);
}
}
.desc {
position: relative;
color: $white;
font-size: 30px;
font-family: 'Pacifico', cursive;
}
}
}
}
#rays {
width: 100px;
height: 100px;
top: 35px;
left: 25px;
}
#rays:after {
height: 100px;
width: 100px;
top: 0px;
left: 0px;
}
#sun {
width: 100px;
height: 100px;
top: 35px;
left: 25px;
}
#miniRays {
width: 75px;
height: 75px;
top: 25px;
left: 75px;
}
#miniRays:after {
height: 75px;
width: 75px;
top: 0px;
left: 0px;
}
#miniSun {
width: 75px;
height: 75px;
top: 25px;
left: 75px;
}
#miniCloud {
background-color: $cloudLight;
width: 75px;
height: 75px;
top: 40px;
animation: cloudFloat 5s infinite linear;
}
#miniCloud:before {
background-color: $cloudLight;
width: 50px;
height: 50px;
top: 17px;
left: 55px;
}
#miniCloud:after {
@include background($cloudLight, $cloudDark);
width: 140px;
height: 60px;
top: 40px;
left: -15px;
}
#miniDarkCloud {
background-color: $darkCloudLight;
width: 75px;
height: 75px;
top: -10px;
left: 75px;
@include scale(0.75);
animation: cloudFloatOpposite 5s infinite linear;
}
#miniDarkCloud:before {
background-color: $darkCloudLight;
width: 50px;
height: 50px;
top: 17px;
left: 55px;
}
#miniDarkCloud:after {
@include background($darkCloudLight, $darkCloudDark);
width: 140px;
height: 60px;
top: 40px;
left: -15px;
}
#cloud {
background-color: $cloudLight;
width: 75px;
height: 75px;
top: -50px;
@include scale(1.25);
animation: cloudFloat 5s infinite linear;
}
#cloud:before {
background-color: $cloudLight;
width: 50px;
height: 50px;
top: 17px;
left: 55px;
}
#cloud:after {
@include background($cloudLight, $cloudDark);
width: 140px;
height: 60px;
top: 40px;
left: -15px;
}
#raindrop1 {
left: -72px;
animation: raindrop 2s infinite linear, raindropFade 2s infinite linear;
}
#raindrop2 {
left: -48px;
animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
}
#raindrop3 {
left: -24px;
animation: raindrop 2s infinite linear, raindropFade 2s infinite linear;
}
#raindrop4 {
left: 0px;
animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
}
#darkCloud {
background-color: $darkCloudLight;
width: 75px;
height: 75px;
top: 0px;
animation: cloudFloat 5s infinite linear;
}
#darkCloud:before {
background-color: $darkCloudLight;
width: 50px;
height: 50px;
top: 17px;
left: 55px;
}
#darkCloud:after {
@include background($darkCloudLight, $darkCloudDark);
width: 140px;
height: 60px;
top: 40px;
left: -15px;
}
#moon {
width: 100px;
height: 100px;
top: -150px;
left: 55px;
@include border-radius(50px);
position: relative;
box-shadow: 30px 15px 0 0 $nightLight;
@include rotate(130deg);
animation: moonSwing 3s infinite linear;
}
#star1 {
top: 35px;
left: -100px;
animation: starFadeIn 5s infinite linear;
}
#star2 {
top: -300px;
left: 15px;
animation: starFadeOut 6s infinite linear;
}
#star3 {
top: -375px;
left: 50px;
animation: starFadeIn 7s infinite linear;
}
@keyframes sunRotate {
from {
@include rotate(0deg);
}
to {
@include rotate(359deg);
}
}
@keyframes cloudFloat {
0% {
left: 0px;
}
50% {
left: 20px;
}
100% {
left: 0px;
}
}
@keyframes cloudFloatOpposite {
0% {
left: 75px;
}
50% {
left: 50px;
}
100% {
left: 75px;
}
}
@keyframes raindrop {
from {
top: 100px;
}
to {
top: 175px;
}
}
@keyframes raindropAlt {
from {
top: 75px;
}
to {
top: 150px;
}
}
@keyframes raindropFade {
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes moonSwing {
0% {
@include rotate(125deg);
}
50% {
@include rotate(135deg);
}
100% {
@include rotate(125deg);
}
}
@keyframes starFadeIn {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes starFadeOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment