.frame
.moon
- for i in (1..12)
div class="crater-#{ i }"
.hill-bg-1
.hill-bg-2
.hill-bg-3
.hill-fg-1
.hill-fg-2
.hill-fg-3
.front
.temperature 12°
.info Wind: E 7 km/hr <br/> Humidity: 87%
table.preview
tr
td Tue
td 21° / 9°
tr
td Wed
td 23° / 10°
- for i in (1..30)
div class="drop-big-#{ i }"
- for i in (1..30)
div class="drop-medium-#{ i }"
- for i in (1..30)
div class="drop-small-#{ i }"
View Compiled
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
$drop-color: #7FC1F9;
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.2);
overflow: hidden;
background: #1A2238;
color: #394568;
font-family: 'Open Sans', Helvetica, sans-serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.moon {
position: absolute;
top:45px;
left:55px;
width:67px;
height:67px;
border-radius:50px;
background: #F6EDBD;
overflow:hidden;
box-shadow:0 0 10px 0 #F6EDBD;
animation:rise 1s ease-out;
.crater-1 {
position:absolute;
top:9px;
left:28px;
width:11px;
height:11px;
border-radius:10px;
background: #ECE1A8;
}
.crater-2 {
@extend .crater-1;
top:12px;
left:0;
}
.crater-3 {
@extend .crater-1;
top:56px;
left:10px;
}
.crater-4 {
@extend .crater-1;
width: 6px;
height: 6px;
top: 37px;
left: 49px;
}
.crater-5 {
@extend .crater-4;
top: 24px;
left: 61px;
}
.crater-6 {
@extend .crater-4;
top: 55px;
left: 33px;
}
.crater-7 {
@extend .crater-4;
top: 17px;
left: 46px;
}
.crater-8 {
@extend .crater-4;
top: 28px;
left: 27px;
}
.crater-9 {
@extend .crater-4;
top: 39px;
left: 17px;
}
.crater-10 {
@extend .crater-1;
width: 4px;
height: 4px;
top: 25px;
left: 15px;
}
.crater-11 {
@extend .crater-1;
top: 37px;
left: 37px;
}
.crater-12 {
@extend .crater-1;
top: 10px;
left: 10px;
}
}
.hill-bg-1 {
position:absolute;
z-index:2;
top:200px;
left:-57px;
width:317px;
height:182px;
background: #26314F;
border-radius: 50%;
}
.hill-bg-2 {
@extend .hill-bg-1;
top: 160px;
left: 60px;
}
.hill-bg-3 {
@extend .hill-bg-1;
top: 197px;
left: 177px;
}
.hill-fg-1 {
@extend .hill-bg-1;
background: #303C5D;
top: 248px;
left: -137px;
}
.hill-fg-2 {
@extend .hill-fg-1;
top: 221px;
left: 63px;
}
.hill-fg-3 {
@extend .hill-fg-1;
top: 248px;
left: 292px;
}
.front {
position:absolute;
z-index:10;
left:0px;
bottom:0px;
width:400px;
height:90px;
background:#7d8ebd;
.temperature {
float:left;
font-weight:500;
margin-left:20px;
font-size:45px;
line-height:90px;
}
.info {
float:left;
font-weight:500;
margin:25px 0 0 13px;
font-size:15px;
line-height:20px;
}
.preview {
float:right;
font-weight:500;
font-size:15px;
text-align:right;
line-height:20px;
margin:25px 20px 0 0;
td {
padding:0 3px;
text-transform:uppercase;
&:first-child {
font-weight:500;
}
}
}
}
@for $i from 1 through 30 {
.drop-big-#{$i} {
position:absolute;
z-index:20;
left: (-20+ 38 * $i) + px;
bottom:90px;
width:8px;
height:8px;
border-radius: 50%;
background: $drop-color;
animation:drop (0.7 + random(2) / 10) + s linear (random(50) / 25) + s infinite;
animation-fill-mode:both;
transform-origin:50% 100%;
&:before {
position: absolute;
content: '';
display: block;
top: -2px;
left: 1px;
width: 6px;
height: 6px;
background: $drop-color;
border-radius: 3px;
}
&:after {
position: absolute;
content: '';
display: block;
top: -5px;
left: 2px;
width: 4px;
height: 10px;
background: $drop-color;
border-radius: 50%;
}
}
.drop-medium-#{$i} {
@extend .drop-big-1;
left: (-30 + 38 * $i) + px;
opacity: 0.6;
width: 6px;
height: 6px;
animation: drop (1.3 + random(2) / 10) + s linear (random(50) / 25) + s infinite;
animation-fill-mode: both;
&:before {
top: -2px;
left: 1px;
width: 4px;
height: 4px;
}
&:after {
top: -4px;
left: 2px;
width: 2px;
height: 6px;
}
}
.drop-small-#{$i} {
@extend .drop-big-1;
left: (-40 + 38 * $i) + px;
opacity: 0.3;
width: 4px;
height: 4px;
animation: drop (1.9 + random(2) / 10) + s linear (random(50) / 25) + s infinite;
animation-fill-mode: both;
&:before {
top: -2px;
left: 1px;
width: 2px;
height: 2px;
}
&:after {
top: -3px;
left: 1px;
width: 2px;
height: 4px;
}
}
}
@keyframes drop {
0% {
transform:translate3d(40px,-320px,0) scaleX(1) scaleY(1) rotate(17deg);
}
85% {
transform: translate3d(0,0,0) scaleX(1) scaleY(1) rotate(17deg);
}
100% {
transform: translate3d(0,0,0) scaleX(3) scaleY(0) rotate(0deg);
}
}
@keyframes rise {
from {
transform:translate(-20px,200px);
}
to {
transform:translate(0,0px);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.