<div class="wrapper">
<div class="circle">
<div class="r-wrapper">
<div class="r-top">
<div class="r-cutout">
</div>
<div class="r-cookie">
</div>
</div>
<div class="r-leg">
</div>
<div class="r-swoosh">
<div class="r-swoosh-cutout">
</div>
</div>
</div>
</div>
/* Rezli.com logo */
/* SCSS boilerplate */
@import "modular-scale";
@import "neat";
@import "bourbon";
@import "color-schemer";
@import "compass";
@import "breakpoint";
@import "susy";
/* Fun Times */
$blue: #4ebdd7;
$white: #fff;
@mixin bluegray(){
animation-name: colorchange;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.wrapper{
animation-iteration-count: infinite;
animation-duration: 4s;
animation-name: roll;
.circle {
position: relative;
height: 400px;
width: 400px;
margin: 0 auto;
background: $blue;
border-radius: 100%;
@include bluegray();
div {
position: absolute;
}
.r-wrapper {
margin: 100px 0 0 138px;
.r-top {
background: $white;
height: 120px;
width: 150px;
border-radius: 0 200px 200px 0;
z-index: 1;
.r-cutout {
background: $blue;
height: 42px;
width: 100px;
margin: 42px 0;
border-radius: 0 50px 50px 0;
@include bluegray();
}
.r-cookie {
background: $white;
width: 48px;
height: 44px;
margin: 42px 0;
left: -48px;
border-radius: 50px 0 0 50px;
}
}
.r-leg {
background: $white;
margin-top: 120px;
width: 50px;
height: 70px;
}
.r-swoosh {
background: $white;
width: 95px;
height: 115px;
border-radius: 0 0 0 95px;
margin: 81px 0 0 58px;
.r-swoosh-cutout {
background: $blue;
width: 50px;
height: 70px;
margin-left: 45px;
border-radius: 0 0 0 50px;
@include bluegray();
}
}
}
}
}
@keyframes colorchange{
from{
background: #4ebdd7;
}
to{
background: gray;
}
}
@keyframes roll {
75%{
-webkit-transform: none;
transform: none;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.