brainstorm logo Semana Acadêmica Design IFSUL
A Pen by João Victor on CodePen.
brainstorm logo Semana Acadêmica Design IFSUL
A Pen by João Victor on CodePen.
<div class="logo"></div> |
@import "compass/css3"; | |
$bg:#58585A; | |
$main:#ED1C24; | |
$size: .8; | |
$ct:10px; | |
@function rem($t, $c:$ct){ | |
$val: ($t / $c)+em; | |
@return $val; | |
} | |
html{font-size: $ct;} | |
body{ | |
font-size: $size+em; | |
&:after{ | |
animation: reveal 1s 1s ease forwards; | |
opacity: 0; | |
content:''; | |
width: rem(457px); | |
height: rem(457px); | |
background: $bg; | |
border-radius: 50%; | |
box-shadow: 0 0 0 rem(20px) white, | |
0 0 0 rem(30px) $bg; | |
position: absolute; | |
top: 0; bottom: 0; | |
left: 0; right: 0; | |
margin: auto; | |
} | |
} | |
.logo{ | |
animation: bounce 1s 2s ease forwards; | |
transform: translateY(-2000px) translateZ(0); | |
width: 0; | |
height: 0; | |
position: absolute; | |
top: - rem(200px); bottom: 0; | |
left: - rem(38px); right: 0; | |
margin: auto; | |
z-index: 1; | |
box-sizing: border-box; | |
border-style: solid; | |
border-width: 0 0 rem(229px) rem(86px); | |
border-color: transparent transparent white transparent; | |
&:before{ | |
content:''; | |
width: 0; | |
height: 0; | |
position: absolute; | |
top: 0; bottom: - rem(610px); | |
left: - rem(38px); right: 0; | |
margin: auto; | |
box-sizing: border-box; | |
border-style: solid; | |
border-width: rem(229px) rem(86px) 0 0; | |
border-color: white transparent transparent transparent; | |
} | |
&:after{ | |
content:''; | |
width: 0; | |
height: 0; | |
position: absolute; | |
top: 0; bottom: - rem(420px); | |
left: - rem(125px); right: 0; | |
margin: auto; | |
box-sizing: border-box; | |
//border-style: solid; | |
//border-width: 0 0 em(38px) em(49px); | |
//border-color: transparent transparent $main transparent; | |
} | |
} | |
@keyframes bounce { | |
100% {transform: translateY(0);} | |
40% {transform: translateY(30px);} | |
60% {transform: translateY(-60px);} | |
80% {transform: translateY(-15px);} | |
} | |
@keyframes reveal { | |
to{ | |
opacity: 1; | |
} | |
} | |