Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="bike">
<div class="wheel wheel--front">
<div class="spoke spoke--0"></div>
<div class="spoke spoke--1"></div>
<div class="spoke spoke--2"></div>
<div class="spoke spoke--3"></div>
<div class="spoke spoke--4"></div>
</div>
<div class="wheel wheel--back">
<div class="spoke spoke--0"></div>
<div class="spoke spoke--1"></div>
<div class="spoke spoke--2"></div>
<div class="spoke spoke--3"></div>
<div class="spoke spoke--4"></div>
</div>
<div class="frame frame--top"></div>
<div class="frame frame--bottom"></div>
<div class="saddle__post"></div>
<div class="saddle"></div>
<div class="handle-bar__post"></div>
<div class="handle-bar__connector"></div>
<div class="handle-bar"></div>
<div class="note note--0"></div>
<div class="note note--1"></div>
<div class="note note--2"></div>
<div class="note note--3"></div>
<div class="note note--4"></div>
<div class="note note--5"></div>
</div>
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
$color: #666;
$size: 200px;
$thickness: $size/50;
.bike {
position: relative;
width: $size;
height: $size;
border: 1px dashed $color;
}
.frame--top {
transform: translateX(-50%) skew(30deg);
border: $thickness solid $color;
border-bottom: 0;
border-left: 0;
width: 32%;
height: 30%;
position: absolute;
bottom: 17%;
left: 57%;
}
.frame--bottom {
transform: translateX(-50%) skew(55deg);
border: $thickness solid $color;
border-top: 0;
border-right: 0;
width: 25%;
height: 20%;
position: absolute;
bottom: 17%;
left: 56%;
}
.saddle__post {
transform: rotate(10deg);
height: 40%;
border-right: $thickness solid $color;
position: absolute;
bottom: 17%;
left: 60%;
}
.saddle {
transform: rotate(-5deg);
position: absolute;
border-radius: 10px;
width: 13%;
height: 3%;
background-color: $color;
left: 55%;
bottom: 55%;
}
.handle-bar__post {
transform: rotate(23deg);
height: 40%;
border-right: $thickness solid $color;
position: absolute;
bottom: 17%;
left: 26%;
}
.handle-bar__connector {
width: 8%;
border-top: $thickness solid $color;
position: absolute;
left: 26%;
bottom: 54.5%;
}
.handle-bar {
transform: rotate(40deg);
border-radius: 50%;
position: absolute;
width: 8%;
height: 12%;
left: 20%;
bottom: 41.8%;
border: $thickness solid $color;
border-right-color: transparent;
border-top-color: transparent;
}
.wheel {
border-radius: 50%;
border: $thickness solid $color;
height: $size / 3;
width: $size / 3;
position: absolute;
-webkit-animation-name: spin;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.wheel--front {
bottom: 0;
left: 0;
}
.wheel--back {
bottom: 0;
right: 0;
}
.spoke {
width: 100%;
position: absolute;
top: 50%;
border-bottom: 1px solid lighten($color, 40%);
}
.spoke--1 {
transform: rotate(36deg);
}
.spoke--2 {
transform: rotate(72deg);
}
.spoke--3 {
transform: rotate(108deg);
}
.spoke--4 {
transform: rotate(144deg);
}
.note {
border-right: $thickness/3 solid $color;
height: 5%;
position: absolute;
-webkit-animation-name: rise-and-fade;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
&:before {
content: ' ';
position: absolute;
bottom: -10%;
right: -$thickness/4;
height: $thickness;
width: $thickness;
border-radius: 50%;
background-color: $color;
}
}
.note--0 {
top: 10%;
left: 25%;
}
.note--1 {
top: 10%;
left: 55%;
}
.note--2 {
top: 15%;
left: 35%;
}
.note--3 {
top: 10%;
left: 25%;
}
.note--4 {
top: 25%;
left: 10%;
}
.note--5 {
top: 20%;
right: 16%;
}
@-webkit-keyframes spin {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
@-webkit-keyframes rise-and-fade {
from { transform: translateY(200%); }
to { transform: translateY(-200%); }
}
.bike {
position: relative;
width: 200px;
height: 200px;
border: 1px dashed #666;
}
.frame--top {
transform: translateX(-50%) skew(30deg);
border: 4px solid #666;
border-bottom: 0;
border-left: 0;
width: 32%;
height: 30%;
position: absolute;
bottom: 17%;
left: 57%;
}
.frame--bottom {
transform: translateX(-50%) skew(55deg);
border: 4px solid #666;
border-top: 0;
border-right: 0;
width: 25%;
height: 20%;
position: absolute;
bottom: 17%;
left: 56%;
}
.saddle__post {
transform: rotate(10deg);
height: 40%;
border-right: 4px solid #666;
position: absolute;
bottom: 17%;
left: 60%;
}
.saddle {
transform: rotate(-5deg);
position: absolute;
border-radius: 10px;
width: 13%;
height: 3%;
background-color: #666;
left: 55%;
bottom: 55%;
}
.handle-bar__post {
transform: rotate(23deg);
height: 40%;
border-right: 4px solid #666;
position: absolute;
bottom: 17%;
left: 26%;
}
.handle-bar__connector {
width: 8%;
border-top: 4px solid #666;
position: absolute;
left: 26%;
bottom: 54.5%;
}
.handle-bar {
transform: rotate(40deg);
border-radius: 50%;
position: absolute;
width: 8%;
height: 12%;
left: 20%;
bottom: 41.8%;
border: 4px solid #666;
border-right-color: transparent;
border-top-color: transparent;
}
.wheel {
border-radius: 50%;
border: 4px solid #666;
height: 66.66667px;
width: 66.66667px;
position: absolute;
-webkit-animation-name: spin;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.wheel--front {
bottom: 0;
left: 0;
}
.wheel--back {
bottom: 0;
right: 0;
}
.spoke {
width: 100%;
position: absolute;
top: 50%;
border-bottom: 1px solid #cccccc;
}
.spoke--1 {
transform: rotate(36deg);
}
.spoke--2 {
transform: rotate(72deg);
}
.spoke--3 {
transform: rotate(108deg);
}
.spoke--4 {
transform: rotate(144deg);
}
.note {
border-right: 1.33333px solid #666;
height: 5%;
position: absolute;
-webkit-animation-name: rise-and-fade;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.note:before {
content: ' ';
position: absolute;
bottom: -10%;
right: -1px;
height: 4px;
width: 4px;
border-radius: 50%;
background-color: #666;
}
.note--0 {
top: 10%;
left: 25%;
}
.note--1 {
top: 10%;
left: 55%;
}
.note--2 {
top: 15%;
left: 35%;
}
.note--3 {
top: 10%;
left: 25%;
}
.note--4 {
top: 25%;
left: 10%;
}
.note--5 {
top: 20%;
right: 16%;
}
@-webkit-keyframes spin {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
@-webkit-keyframes rise-and-fade {
from {
transform: translateY(200%);
}
to {
transform: translateY(-200%);
}
}
<div class="bike">
<div class="wheel wheel--front">
<div class="spoke spoke--0"></div>
<div class="spoke spoke--1"></div>
<div class="spoke spoke--2"></div>
<div class="spoke spoke--3"></div>
<div class="spoke spoke--4"></div>
</div>
<div class="wheel wheel--back">
<div class="spoke spoke--0"></div>
<div class="spoke spoke--1"></div>
<div class="spoke spoke--2"></div>
<div class="spoke spoke--3"></div>
<div class="spoke spoke--4"></div>
</div>
<div class="frame frame--top"></div>
<div class="frame frame--bottom"></div>
<div class="saddle__post"></div>
<div class="saddle"></div>
<div class="handle-bar__post"></div>
<div class="handle-bar__connector"></div>
<div class="handle-bar"></div>
<div class="note note--0"></div>
<div class="note note--1"></div>
<div class="note note--2"></div>
<div class="note note--3"></div>
<div class="note note--4"></div>
<div class="note note--5"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment