Skip to content

Instantly share code, notes, and snippets.

@b0c0de

b0c0de/bauru-day-night-sun-rain-pure-css-illustrations-and-animations.markdown

Created November 20, 2019 03:53
Show Gist options
  • Save b0c0de/c0a564be9c6c97a6bb1b0a3292d935b5 to your computer and use it in GitHub Desktop.
Save b0c0de/c0a564be9c6c97a6bb1b0a3292d935b5 to your computer and use it in GitHub Desktop.
Download ZIP
Bauru - Day&Night Sun&Rain - Pure CSS Illustrations and Animations
Raw
bauru-day-night-sun-rain-pure-css-illustrations-and-animations.markdown

Bauru - Day&Night Sun&Rain - Pure CSS Illustrations and Animations

A city (based on Bauru-SP Brasil) made with css only (js used to add some classes to make it night \o). You can use the slider to change day-night and sun-rain. have fun :D And don't forget to click on the clouds!

A Pen by Bojan on CodePen.

License.

Raw
index.html
<div class="ceu">
<div class="estrelas-wrapper hidden"></div>
<div class="chuva-wrapper hidden">
</div>
<div class="nuvem-wrapper">
<div class="nuvem nuvem1"></div>
<div class="nuvem tipob nuvem2"></div>
<div class="nuvem nuvem3"></div>
<div class="nuvem tipob nuvem4"></div>
<div class="nuvem nuvem5"></div>
<div class="nuvem tipob nuvem6"></div>
<div class="nuvem nuvem7"></div>
<div class="nuvem tipob nuvem8"></div>
<div class="nuvem nuvem9"></div>
<div class="nuvem tipob nuvem10"></div>
</div>
</div>
<div class="container">
<div class="info">
<div class="switch-wrapper">
<label class="switch dia-noite">
<input type="checkbox">
<div class="slider">
<div class="dia-noite">
<div class="raio r1"></div>
<div class="raio r2"></div>
<div class="raio r3"></div>
<div class="raio r4"></div>
</div>
<div class="e-noite"></div>
</div>
</label>
<label class="switch sol-chuva">
<input type="checkbox">
<div class="slider">
<div class="sol-chuva">
<div class="raio-chuva"></div>
</div>
</div>
</label>
</div>
</div>
</div>
<div class="bg-baixo">
<div class="construcao-wrapper">
<div class="predio-escuro predio-1"></div>
<div class="predio-escuro predio-2"></div>
<div class="predio-escuro predio-3"></div>
<div class="predio-normal-1">
<div class="janela-n1 janela-1 noite-brilha"></div>
<div class="janela-n1 janela-2"></div>
<div class="janela-n1 janela-3 noite-brilha"></div>
<div class="janela-n1 janela-4"></div>
<div class="janela-n1 janela-5"></div>
<div class="janela-n1 janela-6 noite-brilha"></div>
<div class="janela-n1 janela-7 noite-brilha"></div>
<div class="janela-n1 janela-8"></div>
<div class="janela-n1 janela-9 noite-brilha"></div>
<div class="janela-n1 janela-10"></div>
<div class="janela-n1 janela-11"></div>
<div class="janela-n1 janela-12"></div>
<div class="janela-n1 janela-13 noite-brilha"></div>
<div class="janela-n1 janela-14 noite-brilha"></div>
<div class="janela-n1 janela-15"></div>
<div class="janela-n1 janela-16 noite-brilha"></div>
<div class="janela-n1 janela-17"></div>
<div class="janela-n1 janela-18"></div>
</div>
<div class="predio-normal-2">
<div class="janelas-esquerda">
<div class="janela noite-brilha"></div>
<div class="janela"></div>
<div class="janela noite-brilha"></div>
<div class="janela"></div>
</div>
<div class="janelas-direita">
<div class="janela-d"></div>
<div class="janela-d"></div>
<div class="janela-d noite-brilha"></div>
<div class="janela-d noite-brilha"></div>
</div>
</div>
<div class="predio-normal-3">
<div class="fileira-janelas f1">
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3"></div>
<div class="janela-n3"></div>
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3"></div>
<div class="janela-n3 noite-brilha"></div>
</div>
<div class="fileira-janelas f2">
<div class="janela-n3"></div>
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3"></div>
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3"></div>
<div class="janela-n3"></div>
<div class="janela-n3 noite-brilha"></div>
</div>
<div class="fileira-janelas f3">
<div class="janela-n3"></div>
<div class="janela-n3"></div>
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3"></div>
<div class="janela-n3"></div>
</div>
<div class="fileira-janelas f4">
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3"></div>
<div class="janela-n3"></div>
<div class="janela-n3"></div>
<div class="janela-n3"></div>
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3 noite-brilha"></div>
</div>
<div class="fileira-janelas f5">
<div class="janela-n3"></div>
<div class="janela-n3"></div>
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3"></div>
<div class="janela-n3 noite-brilha"></div>
<div class="janela-n3"></div>
<div class="janela-n3"></div>
</div>
</div>
<div class="arvore a8">
<div class="folha arvore-1 f1"></div>
<div class="folha arvore-1 f2"></div>
<div class="folha arvore-1 f3"></div>
<div class="folha arvore-1 f4"></div>
</div>
<div class="arvore a9">
<div class="folha arvore-2 f1"></div>
<div class="folha arvore-2 f2"></div>
<div class="folha arvore-2 f3"></div>
<div class="folha arvore-2 f4"></div>
</div>
<div class="arvore a10">
<div class="folha arvore-3 f1"></div>
<div class="folha arvore-3 f2"></div>
<div class="folha arvore-3 f3"></div>
<div class="folha arvore-3 f4"></div>
</div>
<div class="arvore a11">
<div class="folha arvore-2 f1"></div>
<div class="folha arvore-2 f2"></div>
<div class="folha arvore-2 f3"></div>
<div class="folha arvore-2 f4"></div>
</div>
<div class="arvore a12">
<div class="folha arvore-3 f1"></div>
<div class="folha arvore-3 f2"></div>
<div class="folha arvore-3 f3"></div>
<div class="folha arvore-3 f4"></div>
</div>
<div class="muro"></div>
<div class="rua"></div>
<div class="onibus">
<div class="azul"></div>
<div class="janela-padrao janela-atras"></div>
<div class="janela-pequena janela-p-meio-1"></div>
<div class="janela-padrao janela-meio"></div>
<div class="janela-pequena janela-p-meio-2"></div>
<div class="janela-padrao janela-f1"></div>
<div class="janela-padrao janela-f2"></div>
<div class="janela-pequena janela-p-frente"></div>
<div class="laranja"></div>
<div class="roda roda-1"></div>
<div class="roda roda-2"></div>
</div>
<div class="rio"></div>
<div class="poste p1">
<div class="lampada esquerda"></div>
<div class="lampada direita"></div>
</div>
<div class="poste p2">
<div class="lampada esquerda"></div>
<div class="lampada direita"></div>
</div>
<div class="poste p3">
<div class="lampada esquerda"></div>
<div class="lampada direita"></div>
</div>
<div class="poste p4">
<div class="lampada esquerda"></div>
<div class="lampada direita"></div>
</div>
<div class="arvore a1">
<div class="folha arvore-3 f1"></div>
<div class="folha arvore-3 f2"></div>
<div class="folha arvore-3 f3"></div>
<div class="folha arvore-3 f4"></div>
</div>
<div class="arvore a2">
<div class="folha arvore-2 f1"></div>
<div class="folha arvore-2 f2"></div>
<div class="folha arvore-2 f3"></div>
<div class="folha arvore-2 f4"></div>
</div>
<div class="arvore a3">
<div class="folha arvore-1 f1"></div>
<div class="folha arvore-1 f2"></div>
<div class="folha arvore-1 f3"></div>
<div class="folha arvore-1 f4"></div>
</div>
<div class="arvore a4">
<div class="folha arvore-2 f1"></div>
<div class="folha arvore-2 f2"></div>
<div class="folha arvore-2 f3"></div>
<div class="folha arvore-2 f4"></div>
</div>
<div class="arvore a5">
<div class="folha arvore-3 f1"></div>
<div class="folha arvore-3 f2"></div>
<div class="folha arvore-3 f3"></div>
<div class="folha arvore-3 f4"></div>
</div>
<div class="arvore a6">
<div class="folha arvore-1 f1"></div>
<div class="folha arvore-1 f2"></div>
<div class="folha arvore-1 f3"></div>
<div class="folha arvore-1 f4"></div>
</div>
<div class="arvore a7">
<div class="folha arvore-2 f1"></div>
<div class="folha arvore-2 f2"></div>
<div class="folha arvore-2 f3"></div>
<div class="folha arvore-2 f4"></div>
</div>
<div class="totens">
<div class="totem t1"></div>
<div class="totem t2 esquerda"></div>
<div class="totem t2 direita"></div>
<div class="totem t3 esquerda"></div>
<div class="totem t3 direita"></div>
<div class="totem t4 esquerda"></div>
<div class="totem t4 direita"></div>
<div class="totem t5 esquerda"></div>
<div class="totem t5 direita"></div>
<div class="totem t6 esquerda"></div>
<div class="totem t6 direita"></div>
<div class="totem t7 esquerda"></div>
<div class="totem t7 direita"></div>
</div>
<div class="construcao-do-centro">
<div class="centro"></div>
</div>
</div>
</div>
Raw
script.js
var mudaDia = function mudaDia() {
// se é noite
if ($('.switch.dia-noite input').prop('checked')) {
$('body, .lampada, .predio-normal-1, .predio-normal-2, .predio-normal-3').addClass('noite');
$('.estrelas-wrapper').removeClass('hidden');
// se não tá chovendo
if (!$('.switch.sol-chuva input').prop('checked')) {
colocaEstrelas();
$('.nuvem-wrapper').addClass('hidden');
} else
$('.estrelas-wrapper').empty();
// se é dia
} else {
$('.nuvem-wrapper').removeClass('hidden');
$('body, .lampada, .predio-normal-1, .predio-normal-2, .predio-normal-3').removeClass('noite');
$('.estrelas-wrapper').addClass('hidden');
}
};
var mudaChuva = function mudaChuva() {
// se tá chovendo
if ($('.switch.sol-chuva input').prop('checked')) {
$('.nuvem-wrapper, .chuva-wrapper').removeClass('hidden');
$('.nuvem').addClass('chovendo');
if ($('.switch.dia-noite input').prop('checked'))
$('.estrelas-wrapper').empty();
// se não tá chovendo
} else {
// se é noite
if ($('.switch.dia-noite input').prop('checked')) {
colocaEstrelas();
$('.nuvem-wrapper').addClass('hidden');
}
$('.chuva-wrapper').addClass('hidden');
$('.nuvem').removeClass('chovendo');
}
};
var colocaEstrelas = function colocaEstrelas() {
/* criando estrelas */
for (i = 0; i < 100; i++)
$('.estrelas-wrapper').append("<div class='estrelas s" + i +"'></div>");
};
$(function() {
$('.switch').on('click', function() {
if ($(this).hasClass('dia-noite'))
mudaDia();
else
mudaChuva();
});
/* criando chuva */
for (i = 0; i <= 100; i++)
$(".chuva-wrapper").append("<div class='chuva chuva-" + i + "'></div>");
$('.nuvem').on('click', function(){
$(this).toggleClass('pao');
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Raw
style.scss
$dia: #5A7495;
$noite: #181F26;
$textColor: #eee;
$nuvem: #f9f9f9;
$chuva: #e9e9e9;
$pao: #E0B56E;
$md: '1024px';
$sm: '1023px';
$xs: '787px';
$sol: #dcb64c;
$lua: #fbfcfc;
$bg-baixo: #50662e;
$rio: #69764f;
$border-rio: #505f35;
$construcao-do-centro: #bcbcbc;
$totem-topo: #545455;
$totem-chao: #3c3c3c;
$tronco: #353126;
$arvore-1: #44612e - 5;
$arvore-2: #515b2f - 5;
$arvore-3: #374927;
$poste: #49494a;
$lampada-dia: #eee;
$rua: #2a2b2a;
$muro: #736367;
$predio-escuro: #404b54;
$predio-1: #949494;
$predio-2: #807e75;
$detalhe-janela: #896443;
$onibus: #949494;
$azul-bus: #223d79;
$laranja-bus: #9f663f;
$luz-janela: #cdb27b;
// include keyframe animations that work in every browser
@mixin animation($name) {
@keyframes #{$name} {
@content;
}
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
}
// include animations that work in every browser
@mixin browsers($info) {
animation: $info;
-webkit-animation: $info;
-moz-animation: $info;
-ms-animation: $info;
-o-animation: $info;
}
// include gradients that work in every browser
@mixin gradient($info) {
background: linear-gradient($info);
background: -webkit-linear-gradient($info);
background: -moz-linear-gradient($info);
background: -ms-linear-gradient($info);
}
// include transformations that work in every browser
@mixin transform($info) {
transform: $info;
-webkit-transform: $info;
-moz-transform: $info;
-ms-transform: $info;
}
body {
background-color: $dia;
color: $textColor;
font-family: helvetica, arial;
line-height: 1.6;
margin: 0;
overflow: hidden;
padding: 0;
&.noite {
background-color: $noite;
}
}
.container {
bottom: 0;
height: 300px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 35%;
z-index: 3;
@media (max-width: $sm) {
height: 400px;
width: 45%;
}
@media (max-width: $xs) {
width: 80%;
}
&::before {
background-color: $textColor;
border-radius: 5px;
content: '';
height: 150px;
opacity: 0.15;
left: 0;
margin: auto;;
position: absolute;
right: 0;
top: -10%;
width: 80%;
@media (max-width: $sm) {
height: 180px;
}
}
}
.switch-wrapper {
margin: 2.5% 0;
text-align: center;
}
.switch {
display: inline-block;
height: 50px;
position: relative;
width: 96px;
& input {
display: none;
}
&.dia-noite {
margin-right: 26px;
}
}
.slider {
background-color: $dia - 10;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
-webkit-transition: .4s;
&:before {
background-color: $dia - 25;
content: "";
height: 40px;
left: 5px;
position: absolute;
top: 5px;
transition: .4s;
-webkit-transition: .4s;
width: 40px;
}
.dia-noite {
transition: .3s;
-webkit-transition: .3s;
background-color: $sol;
border-radius: 100%;
height: 15px;
left: 17px;
position: absolute;
top: 17px;
width: 15px;
z-index: 3;
.raio {
background-color: $sol;
height: 6px;
position: absolute;
width: 2px;
&.r1 {
left: 0;
margin: auto;
right: 0;
top: -8px;
&:after {
@extend .raio.r1;
background-color: $sol;
content: '';
height: 6px;
position: absolute;
top: 25px;
width: 2px;
}
}
&.r2 {
left: -6.5px;
top: 4px;
@include transform(rotate(90deg));
&:after {
@extend .raio.r2;
background-color: $sol;
content: '';
height: 6px;
left: 0;
top: -25px;
position: absolute;
width: 2px;
@include transform(rotate(0deg));
}
}
&.r3 {
left: -2px;
top: 14px;
@include transform(rotate(45deg));
&:after {
@extend .raio.r3;
background-color: $sol;
content: '';
height: 6px;
left: 0;
top: -25px;
position: absolute;
width: 2px;
@include transform(rotate(0deg));
}
}
&.r4 {
left: 16px;
top: 14px;
@include transform(rotate(-45deg));
&:after {
@extend .raio.r4;
background-color: $sol;
content: '';
height: 6px;
left: 0;
top: -26px;
position: absolute;
width: 2px;
@include transform(rotate(0deg));
}
}
}
}
.sol-chuva {
transition: .3s;
-webkit-transition: .3s;
@extend .nuvem;
left: -37px;
top: 8px;
@include transform(scale(0.25));
.raio-chuva {
display: none;
}
&:after {
@media(max-width: 787px) {
height: 55px;
right: 15px;
top: -34px;
width: 55px;
}
}
&:before {
@media(max-width: 787px) {
height: 43px;
left: 19px;
top: -21px;
width: 43px;
}
}
@media(max-width: 787px) {
height: 42px;
width: 125px;
}
}
}
input:checked + .slider {
background-color: $noite + 20;
&:before {
background-color: $noite;
@include transform(translateX(46px));
}
.dia-noite {
background-color: $lua;
height: 19px;
left: 64px;
top: 15px;
width: 17px;
@include transform(rotate(-30deg));
.raio {
display: none;
}
&:after {
background-color: $noite;
border-radius: 100%;
content: '';
height: 15px;
left: 7px;
position: absolute;
top: 4px;
width: 12px;
}
}
.sol-chuva {
background-color: $noite + 140;
left: 9px;
&:after, &:before {
background-color: $noite + 140;
}
.raio-chuva {
background-color: $noite + 100;
display: block;
height: 30px;
left: 50px;
position: absolute;
top: 22px;
width: 18px;
@include transform(skew(-15deg));
&:after {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 25px solid $noite + 100;
content: '';
height: 20px;
left: 2px;
position: absolute;
top: 22px;
width: 5px;
@include transform(rotate(15deg));
}
}
}
}
.hidden {
display: none!important;
}
.bg-baixo {
background-color: $bg-baixo;
bottom: 0;
height: 200px;
position: absolute;
width: 100vw;
}
.rio {
background-color: $rio;
border-radius: 0 0 90% 90%;
border: 4px solid $border-rio;
border-width: 0 4px 4px 0;
bottom: 5px;
height: 120px;
position: absolute;
width: 100vw;
}
.construcao-do-centro {
background-color: $construcao-do-centro - 15;
border-radius: 100%;
border-bottom: 5px solid $construcao-do-centro - 50;
bottom: 30px;
box-shadow: 1px 4px 0px $construcao-do-centro - 110;
height: 73.6px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 330px;
z-index: 3;
&:after {
background-color: $construcao-do-centro - 15;
bottom: -29px;
content: '';
height: 30px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 60px;
@include transform(skew(-10deg));
}
.centro {
background-color: $construcao-do-centro;
border: 1px solid $construcao-do-centro - 75;
border-radius: 100%;
bottom: 4.3px;
height: 65px;
left: 7.5px;
position: absolute;
width: 315px;
}
}
.totens {
bottom: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 400px;
.t1 {
border-bottom: 125px solid $totem-chao;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
bottom: 0;
height: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 50px;
}
.t2 {
border-bottom: 105px solid $totem-chao + 7.5;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: 0;
height: 0;
position: absolute;
width: 30px;
&.esquerda {
left: 140px;
}
&.direita {
right: 140px;
}
}
.t3 {
border-bottom: 60px solid $totem-chao + 15;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: 0;
height: 0;
position: absolute;
width: 50px;
z-index: 1;
&.esquerda {
left: 90px;
@include transform(skew(3deg));
}
&.direita {
right: 90px;
@include transform(skew(-3deg));
}
}
.t4 {
border-bottom: 80px solid $totem-chao + 5;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: 0;
height: 0;
position: absolute;
width: 40px;
z-index: 2;
&.esquerda {
left: 70px;
@include transform(skew(3deg));
}
&.direita {
right: 70px;
@include transform(skew(-3deg));
}
}
.t5 {
border-bottom: 60px solid $totem-chao + 20;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: -12px;
height: 0;
position: absolute;
width: 60px;
z-index: 3;
&.esquerda {
left: 55px;
@include transform(skew(3deg));
}
&.direita {
right: 55px;
@include transform(skew(-3deg));
}
}
.t6 {
border-bottom: 82px solid $totem-chao + 15;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: -15px;
height: 0;
position: absolute;
width: 30px;
z-index: 2;
&.esquerda {
left: 30px;
@include transform(skew(3deg));
}
&.direita {
right: 30px;
@include transform(skew(-3deg));
}
}
.t7 {
border-bottom: 105px solid $totem-chao + 5;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: -12px;
height: 0;
position: absolute;
width: 30px;
z-index: 1;
&.esquerda {
left: 5px;
@include transform(skew(3deg));
}
&.direita {
right: 5px;
@include transform(skew(-3deg));
}
}
}
.arvore {
height: 30px;
position: absolute;
width: 30px;
.folha {
border-radius: 100%;
position: absolute;
&.arvore-1 {
background-color: $arvore-1;
}
&.arvore-2 {
background-color: $arvore-2;
}
&.arvore-3 {
background-color: $arvore-3;
}
}
&.a1 {
bottom: 200px;
left: 150px;
.f1 {
height: 25px;
left: -3px;
top: 0px;
width: 25px;
}
.f2 {
height: 28px;
left: 10px;
top: -7px;
width: 28px;
}
.f3 {
height: 24px;
left: 13px;
top: 8px;
width: 24px;
}
.f4 {
height: 23px;
left: 0px;
top: 10px;
width: 23px;
}
&:after {
background-color: $tronco;
bottom: -22px;
content: '';
height: 30px;
left: 14px;
position: absolute;
width: 6px;
}
}
&.a2 {
bottom: 185px;
left: 200px;
.f1 {
height: 23px;
left: 12px;
top: 0px;
width: 23px;
}
.f2 {
height: 23px;
left: -3px;
top: -4px;
width: 23px;
}
.f3 {
height: 21px;
left: 13px;
top: 8px;
width: 21px;
}
.f4 {
height: 18px;
left: 0px;
top: 12px;
width: 18px;
}
&:after {
background-color: $tronco;
bottom: -18px;
content: '';
height: 26px;
left: 12px;
position: absolute;
width: 6px;
}
}
&.a3 {
bottom: 165px;
left: 390px;
.f1 {
height: 22px;
left: -5px;
top: 0px;
width: 23px;
}
.f2 {
height: 23px;
left: 10px;
top: -2px;
width: 23px;
}
.f3 {
height: 21px;
left: 13px;
top: 8px;
width: 21px;
}
.f4 {
height: 18px;
left: 0px;
top: 12px;
width: 18px;
}
&:after {
background-color: $tronco + 2;
bottom: -18px;
content: '';
height: 26px;
left: 12px;
position: absolute;
width: 6px;
}
}
&.a4 {
bottom: 160px;
left: 420px;
.f1 {
height: 25px;
left: -5px;
top: 0px;
width: 25px;
}
.f2 {
height: 26px;
left: 10px;
top: -2px;
width: 26px;
}
.f3 {
height: 24px;
left: 13px;
top: 8px;
width: 24px;
}
.f4 {
height: 21px;
left: 0px;
top: 12px;
width: 21px;
}
&:after {
background-color: $tronco + 2;
bottom: -22px;
content: '';
height: 30px;
left: 14px;
position: absolute;
width: 6px;
}
}
&.a6 {
bottom: 180px;
left: 1010px;
.f1 {
height: 23px;
left: 12px;
top: 0px;
width: 23px;
}
.f2 {
height: 23px;
left: -3px;
top: -4px;
width: 23px;
}
.f3 {
height: 21px;
left: 13px;
top: 8px;
width: 21px;
}
.f4 {
height: 18px;
left: 0px;
top: 12px;
width: 18px;
}
&:after {
background-color: $tronco;
bottom: -18px;
content: '';
height: 26px;
left: 12px;
position: absolute;
width: 6px;
}
}
&.a5 {
bottom: 170px;
left: 1040px;
.f1 {
height: 23px;
left: -3px;
top: 0px;
width: 23px;
}
.f2 {
height: 23px;
left: 12px;
top: -4px;
width: 23px;
}
.f3 {
height: 21px;
left: 13px;
top: 10px;
width: 21px;
}
.f4 {
height: 20px;
left: -1px;
top: 12px;
width: 20px;
}
&:after {
background-color: $tronco + 4;
bottom: -20px;
content: '';
height: 28px;
left: 13px;
position: absolute;
width: 6px;
}
}
&.a7 {
bottom: 180px;
left: 1280px;
.f1 {
height: 24px;
left: -3px;
top: 0px;
width: 24px;
}
.f2 {
height: 25px;
left: 13px;
top: -3px;
width: 25px;
}
.f3 {
height: 23px;
left: 13px;
top: 10px;
width: 23px;
}
.f4 {
height: 22px;
left: -4px;
top: 12px;
width: 22px;
}
&:after {
background-color: $tronco + 4;
bottom: -20px;
content: '';
height: 28px;
left: 13px;
position: absolute;
width: 6px;
}
}
&.a9 {
bottom: 224px;
left: 285px;
.f1 {
height: 25px;
left: -5px;
top: 0px;
width: 25px;
}
.f2 {
height: 26px;
left: 10px;
top: -2px;
width: 26px;
}
.f3 {
height: 24px;
left: 13px;
top: 8px;
width: 24px;
}
.f4 {
height: 21px;
left: 0px;
top: 12px;
width: 21px;
}
&:after {
background-color: $tronco + 4;
bottom: -18px;
content: '';
height: 26px;
left: 13px;
position: absolute;
width: 5px;
}
}
&.a8 {
bottom: 226px;
left: 315px;
.f1 {
height: 24px;
left: -3px;
top: 0px;
width: 24px;
}
.f2 {
height: 25px;
left: 13px;
top: -3px;
width: 25px;
}
.f3 {
height: 23px;
left: 13px;
top: 10px;
width: 23px;
}
.f4 {
height: 22px;
left: -4px;
top: 12px;
width: 22px;
}
&:after {
background-color: $tronco + 4;
bottom: -20px;
content: '';
height: 28px;
left: 13px;
position: absolute;
width: 6px;
}
}
&.a10 {
bottom: 226px;
left: 510px;
.f1 {
height: 24px;
left: -3px;
top: 0px;
width: 24px;
}
.f2 {
height: 25px;
left: 13px;
top: -3px;
width: 25px;
}
.f3 {
height: 23px;
left: 13px;
top: 10px;
width: 23px;
}
.f4 {
height: 22px;
left: -4px;
top: 12px;
width: 22px;
}
&:after {
background-color: $tronco + 4;
bottom: -20px;
content: '';
height: 28px;
left: 13px;
position: absolute;
width: 6px;
}
}
&.a11 {
bottom: 226px;
left: 720px;
.f1 {
height: 23px;
left: 12px;
top: 0px;
width: 23px;
}
.f2 {
height: 23px;
left: -3px;
top: -4px;
width: 23px;
}
.f3 {
height: 21px;
left: 13px;
top: 8px;
width: 21px;
}
.f4 {
height: 18px;
left: 0px;
top: 12px;
width: 18px;
}
&:after {
background-color: $tronco + 4;
bottom: -20px;
content: '';
height: 28px;
left: 13px;
position: absolute;
width: 6px;
}
}
&.a12 {
bottom: 226px;
left: 1310px;
.f1 {
height: 24px;
left: -3px;
top: 0px;
width: 24px;
}
.f2 {
height: 25px;
left: 13px;
top: -3px;
width: 25px;
}
.f3 {
height: 23px;
left: 13px;
top: 10px;
width: 23px;
}
.f4 {
height: 22px;
left: -4px;
top: 12px;
width: 22px;
}
&:after {
background-color: $tronco + 4;
bottom: -20px;
content: '';
height: 28px;
left: 13px;
position: absolute;
width: 6px;
}
}
}
.poste {
background-color: $poste;
bottom: 190px;
height: 50px;
position: absolute;
width: 2px;
z-index: 1;
.lampada {
background-color: $poste;
border-radius: 100%;
height: 4px;
position: absolute;
top: -1px;
width: 12px;
&.noite {
&:before {
display: block;
}
}
&:after {
background-color: $lampada-dia;
border-radius: 100%;
bottom: -1px;
content: '';
height: 4px;
opacity: 0.7;
position: absolute;
width: 10px;
z-index: -1;
}
&:before {
border-bottom: 50px solid $lampada-dia;
content: '';
display: none;
opacity: 0.15;
position: absolute;
width: 7px;
z-index: -1;
}
&.esquerda {
left: -10px;
&:after {
left: 1px;
}
&:before {
border-left: 20px solid transparent;
left: -17px;
}
}
&.direita {
right: -10px;
&:after {
right: 1px;
}
&:before {
border-right: 20px solid transparent;
right: -17px;
}
}
}
&.p1 {
left: 100px;
}
&.p2 {
left: 450px;
}
&.p3 {
left: 800px;
}
&.p4 {
left: 1150px;
}
}
.rua {
background-color: $rua;
bottom: 200px;
height: 7px;
position: absolute;
width: 100vw;
}
.muro {
background-color: $muro;
bottom: 200px;
height: 40px;
left: 500px;
position: absolute;
width: 675px;
}
.predio-escuro {
background-color: $predio-escuro;
bottom: 200px;
opacity: 0.4;
position: absolute;
&.predio-1 {
height: 120px;
left: 600px;
width: 70px;
&:after {
background-color: $predio-escuro;
content: '';
height: 10px;
position: absolute;
right: 0;
top: -10px;
width: 30px;
}
}
&.predio-2 {
height: 130px;
left: 830px;
width: 90px;
&:after {
background-color: $predio-escuro;
content: '';
height: 8px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: -8px;
width: 50px;
}
}
&.predio-3 {
height: 110px;
left: 1000px;
width: 110px;
}
}
.predio-normal-1 {
background-color: $predio-1;
bottom: 200px;
height: 180px;
left: 350px;
position: absolute;
width: 80px;
&.noite {
.noite-brilha {
background-color: $luz-janela;
}
}
.janela-n1 {
background-color: $predio-1 - 70;
display: inline-block;
height: 10px;
margin: 10px 0 0 11px;
position: relative;
width: 8.6px;
&:after {
background-color: $predio-1 - 50;
bottom: 0;
content: '';
height: 4px;
position: absolute;
width: 8.6px;
}
}
}
.predio-normal-2 {
background-color: $predio-2;
bottom: 200px;
height: 120px;
left: 1210px;
position: absolute;
width: 60px;
&.noite {
.noite-brilha {
background-color: $luz-janela;
}
}
&:after {
background-color: $predio-2;
content: '';
height: 7px;
left: 0;
position: absolute;
top: -7px;
width: 12px;
}
&:before {
background-color: $predio-2;
content: '';
height: 11px;
left: 12px;
position: absolute;
top: -11px;
width: 22px;
}
.janelas-esquerda {
display: inline-block;
position: absolute;
}
.janelas-direita {
@extend .janelas-esquerda;
margin-left: 43px;
}
.janela {
background-color: $predio-1 - 75;
height: 12px;
margin: 12px 0;
width: 10px;
}
.janela-d {
@extend .janela;
margin: 12px 0;
&:after {
background-color: $detalhe-janela;
content: '';
height: 8px;
margin-top: 4px;
position: absolute;
width: 10px;
}
}
}
.predio-normal-3 {
background-color: $predio-1 - 10;
bottom: 200px;
height: 170px;
left: 140px;
position: absolute;
width: 110px;
&.noite {
.noite-brilha {
background-color: $luz-janela;
}
}
.fileira-janelas {
margin: 6px 6px 0 6px;
}
.janela-n3 {
background-color: $predio-1 - 75;
display: inline-block;
height: 12px;
margin: 0;
position: relative;
width: 10px;
}
}
.onibus {
background-color: $onibus;
border-radius: 2px;
bottom: 210px;
height: 26px;
position: absolute;
width: 85px;
@include browsers(vroomvroom 15s linear infinite);
&:after {
background-color: $onibus - 85;
content: '';
height: 18px;
opacity: 0.8;
position: absolute;
right: 0;
top: 2px;
width: 2px;
}
.azul {
background-color: $azul-bus;
height: 26px;
left: 14px;
position: absolute;
width: 35px;
}
.laranja {
background-color: $laranja-bus;
height: 5px;
position: absolute;
top: 14px;
width: 100%;
}
.janela-padrao {
background-color: $onibus - 95;
border-radius: 2px;
height: 10px;
position: absolute;
top: 2px;
width: 10px;
}
.janela-pequena {
background-color: $onibus - 95;
border-radius: 2px;
height: 10px;
position: absolute;
top: 3px;
width: 7px;
&:before {
background-color: $azul-bus - 10;
bottom: -13px;
content: '';
height: 13px;
position: absolute;
width: 7px;
}
}
.janela-p-meio-1 {
left: 16px;
}
.janela-p-meio-2 {
left: 39px;
}
.janela-atras {
left: 2px;
}
.janela-meio {
left: 26px;
}
.janela-f1 {
left: 52px;
}
.janela-f2 {
left: 63px;
}
.janela-p-frente {
left: 75px;
&:before {
background-color: $onibus - 10;
}
}
.roda {
background-color: #1b1b1b;
border-radius: 100px;
bottom: -5px;
height: 12px;
position: absolute;
width: 12px;
@include browsers(gira 0.4s linear infinite);
&:after {
background-color: #fff;
border-radius: 100px;
bottom: 0;
content: '';
display: block;
height: 6px;
left: 0;
margin: auto;
opacity: 0.2;
position: absolute;
right: 0;
top: 0;
width: 6px;
@include browsers(gira 0.4s linear infinite);
}
}
.roda-1 {
right: 20px;
}
.roda-2 {
left: 23px;
}
}
/* nuvens que viram pao */
.nuvem {
background-color: $nuvem;
border-radius: 100px;
height: 42px;
opacity: 0.75;
position: absolute;
width: 125px;
&.chovendo, &.chovendo:after, &.chovendo:before {
background-color: $nuvem - 100;
}
&.tipob {
@media (max-width: $xs) {
display: none;
}
&:after {
height: 35px;
right: 15px;
top: -20px;
width: 35px;
}
&:before {
height: 60px;
right: 19px;
top: -30px;
width: 60px;
}
}
&:after {
background-color: $nuvem;
border-radius: 100px;
content: '';
display: block;
height: 55px;
position: absolute;
right: 15px;
top: -34px;
width: 55px;
}
&:before {
background-color: $nuvem;
border-radius: 100px;
content: '';
display: block;
height: 43px;
position: absolute;
left: 19px;
top: -21px;
width: 43px;
}
@media (max-width: $xs) {
height: 17px;
width: 50px;
&:after {
height: 22px;
right: 6px;
top: -13px;
width: 22px;
}
&:before {
height: 17px;
left: 7.5px;
top: -8px;
width: 17px;
}
}
}
@for $i from 1 through 10{
.nuvem#{$i}{
$delay: random(250)*-1 + s;
$speed: random(60) + 120 + s;
left: 0;
top: random(20) + 35 + px;
@include browsers(walkthecloud $speed $delay linear infinite);
}
}
@include animation(walkthecloud) {
from {left: -20%; }
to { left: 120%; }
}
/* estrelas da noite */
.estrelas-wrapper {
z-index: 1;
}
.estrelas{
background-color: #f9f9f9;
border-radius: 5px;
position: absolute;
}
@for $i from 1 through 100{
.s#{$i}{
$speed: random(15) + 10 + s;
$delay: - (random(25)) + s;
$size: random(2) + px;
height: $size;
left: random(100) + 0%;
top: random(100) + 0%;
width: $size;
@include browsers(shiningStar $speed $delay infinite);
}
}
@include animation(shiningStar) {
0% { opacity: 1; }
20% { opacity: 0.5; }
40% { opacity: 0; }
60% { opacity: 0.5; }
80% { opacity: 0.75; }
100% { opacity: 1; }
}
/* ta chovendo kd minha canoa? */
.chuva-wrapper {
overflow: hidden;
z-index: 2;
}
.chuva {
background-color: $chuva;
height: 7px;
opacity: 0.25;
position: absolute;
width: 1px;
z-index: 2;
}
@for $i from 0 through 100{
.chuva-#{$i}{
$speed: random(5) + 1 + s;
$delay: - (random(100)/random(100)) + s;
left: random(90) + 0%;
@include browsers(kdcanoa $speed $delay linear infinite);
}
}
@include animation(kdcanoa) {
from { top: -10% }
to { top: 110% }
}
/* o ceu vira pao */
.pao, .pao.chovendo{
background-color: $pao;
border-radius: 80% 90% 80% 85%;
height: 50px;
position: absolute;
width: 125px;
@media (max-width: $xs) {
height: 20px;
width: 50px;
}
&:after, &.tipob:after {
background-color: $pao + 30;
border-radius: 5% 100% 5% 100%;
bottom: 0;
box-shadow: 0px 3px 3px ($pao - 20) inset;
content: '';
display: block;
height: 35%;
left: 0;
margin: auto;
opacity: 0.8;
position: absolute;
right: 0;
top: 0;
@include transform(rotate(1deg));
width: 75%;
}
&:before {
display: none;
}
}
/* ônibus e suas animacoes */
.bg-wrapper .onibus-wrapper {
bottom: 20vh;
left: 20vw;
position: absolute;
z-index: 3;
img {
width: 100%;
}
}
/* roda que roda */
@include animation(gira) {
100% { -webkit-transform: rotate(360deg); }
}
/* ônibus que anda */
@include animation(vroomvroom) {
from {left: -20px; }
to { left: 110%; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment