Skip to content

Instantly share code, notes, and snippets.

@clement006

clement006/Pure-CSS3-Mister-Jekyll-Logo.markdown

Created October 8, 2013 14:36
Show Gist options
  • Save clement006/6885711 to your computer and use it in GitHub Desktop.
Save clement006/6885711 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Clément Noterdaem.
Raw
index.html
<div class="mjlogo">
<div class="hat">
<div class="hat-top"></div>
<div class="hat-middle"></div>
<div class="hat-bottom"></div>
</div>
<div class="cogwheel">
<div class="wheel wheel2">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
<b class="b6"></b>
<b class="b7"></b>
<b class="b8"></b>
<b class="b9"></b>
<b class="b10"></b>
<b class="b11"></b>
<b class="b12"></b>
</div>
<div class="wheel">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
<b class="b6"></b>
<b class="b7"></b>
<b class="b8"></b>
<b class="b9"></b>
<b class="b10"></b>
<b class="b11"></b>
<b class="b12"></b>
</div>
</div>
<div class="mustache">
<span class="l"><b>~</b></span>
<span class="r"><b>~</b></span>
</div>
</div>
Raw
Pure-CSS3-Mister-Jekyll-Logo.markdown
Raw
style.css
.mjlogo {
position:relative;
display:block;
width:120px;
height:170px;
cursor:pointer;
}
.mjlogo:hover .hat {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
transform: rotate(70deg);
}
.mjlogo:hover .cogwheel .wheel {
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
/****************** HAT ******************/
.mjlogo .hat {
position:absolute;
top:10px;
left:0;
display:block;
width:120px;
height:105px;
-webkit-transform: scale(1,.9);
-moz-transform: scale(1,.9);
transform: scale(1,.9);
-webkit-transition: all 1s cubic-bezier(0.860, 0.000, 0.070, 1.000) 0s;
-moz-transition: all 1s cubic-bezier(0.860, 0.000, 0.070, 1.000) 0s;
transition: all 1s cubic-bezier(0.860, 0.000, 0.070, 1.000) 0s;
-webkit-transform-origin:bottom right;
-moz-transform-origin:bottom right;
transform-origin:bottom right;
}
.mjlogo .hat-top {
position:absolute;
top:0;
left:0;
background:grey;
display:block;
width:80px;
height:27px;
margin-left:20px;
border-radius:100%;
z-index:3
}
.mjlogo .hat-middle {
position:absolute;
left:0;
background:black;
display:block;
width:80px;
height:37px;
margin-left:15px;
border-radius:0 0 100% 100%;
z-index:2;
top:45px;
border:5px solid white;
}
.mjlogo .hat-middle:before {
content:"";
top:-37px;
left:0px;
display:block;
background:black;
width:80px;
height:40px;
z-index:2;
position:absolute;
}
.mjlogo .hat-bottom {
position:absolute;
background:black;
display:block;
width:120px;
height:50px;
border-radius:100%;
z-index:1;
top:58px;
}
/****************** COGWHEEL ******************/
.mjlogo .cogwheel {
position:absolute;
top:100px;
left:0;
display:block;
width:50px;
height:50px;
left:65px;
}
.mjlogo .cogwheel .wheel{
position:absolute;
z-index:6;
width:50px;
height:50px;
top:0;
left:0;
}
.mjlogo .cogwheel .wheel2{
z-index:5;
}
.mjlogo .cogwheel .circle{
position:absolute;
border:0px solid #C9243F;
top:10px;
left:10px;
width:10px;
height:10px;
border-radius:100%;
border-width:10px;
}
.mjlogo .cogwheel .wheel b{
height:0px;
border:0px solid rgba(0,0,0,0);
border-bottom-color:#C9243F;
position:absolute;
top:5px;
left:20px;
width: 5px;
border-width:0 3px 14px 3px;
-webkit-transform-origin: 5px 20px;
-moz-transform-origin:5px 20px;
transform-origin:5px 20px;
}
.mjlogo .cogwheel .wheel2 b{
border-bottom-color:#FFFFFF;
left:19px;
top:4px;
width: 7px;
border-width:0 3px 16px 3px;
-webkit-transform-origin: 6px 21px;
-moz-transform-origin: 6px 21px;
transform-origin: 6px 21px;
}
.mjlogo .cogwheel .wheel b.b2{
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
transform:rotate(30deg);
}
.mjlogo .cogwheel .wheel b.b3{
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
transform:rotate(60deg);
}
.mjlogo .cogwheel .wheel b.b4{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform:rotate(90deg);
}
.mjlogo .cogwheel .wheel b.b5{
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
transform:rotate(120deg);
}
.mjlogo .cogwheel .wheel b.b6{
-webkit-transform:rotate(150deg);
-moz-transform:rotate(150deg);
transform:rotate(150deg);
}
.mjlogo .cogwheel .wheel b.b7{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
transform:rotate(180deg);
}
.mjlogo .cogwheel .wheel b.b8{
-webkit-transform:rotate(210deg);
-moz-transform:rotate(210deg);
transform:rotate(210deg);
}
.mjlogo .cogwheel .wheel b.b9{
-webkit-transform:rotate(240deg);
-moz-transform:rotate(240deg);
transform:rotate(240deg);
}
.mjlogo .cogwheel .wheel b.b10{
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
transform:rotate(270deg);
}
.mjlogo .cogwheel .wheel b.b11{
-webkit-transform:rotate(300deg);
-moz-transform:rotate(300deg);
transform:rotate(300deg);
}
.mjlogo .cogwheel .wheel b.b12{
-webkit-transform:rotate(330deg);
-moz-transform:rotate(330deg);
transform:rotate(330deg);
}
.mjlogo .cogwheel .wheel{
-webkit-animation-duration:1.5s;
animation-duration:1.5s;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function:cubic-bezier(0.310, 0.085, 0.575, 0.900);
animation-timing-function:cubic-bezier(0.310, 0.085, 0.575, 0.900);
-webkit-animation-name: rotateLeft;
animation-name: rotateLeft;
}
@-webkit-keyframes rotateLeft {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
@keyframes rotateLeft {
from {-moz-transform:rotate(0deg);transform:rotate(0deg);}
to {-moz-transform:rotate(0deg);transform:rotate(360deg);}
}
/****************** MUSTACHE ******************/
.mjlogo .mustache{
position:absolute;
top:155px;
left:3px;
display:block;
width:115px;
height:45px;
font-size:150px;
line-height:20px;
-webkit-transform: scale(.9,.8);
-moz-transform: scale(.9,.8);
transform: scale(.9,.8);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mjlogo .mustache span {
position:absolute;
top:0;
left:0;
width:70px;
height:36px;
overflow:hidden;
font-weight:bold;
-webkit-transform: scale(.6,-1.1);
-moz-transform: scale(.6,-1.1);
transform: scale(.6,-1.1);
-webkit-transition: all .5s cubic-bezier(0.860, 0.000, 0.070, 1.000) 0s;
-moz-transition: all .5s cubic-bezier(0.860, 0.000, 0.070, 1.000) 0s;
transition: all .5s cubic-bezier(0.860, 0.000, 0.070, 1.000) 0s;
}
.mjlogo .mustache span.r {
left:42px;
-webkit-transform: scale(.6,1.1);
-moz-transform: scale(.6,1.1);
transform: scale(.6,1.1);
}
.mjlogo .mustache span b {
position:absolute;
top:0;
left:0;
-webkit-transform: translate(-5px, 0);
-moz-transform: translate(-5px, 0);
transform: translate(-5px, 0);
}
.mjlogo .mustache span.r b {
margin-top:-9px;
margin-left:-3px;
}
body:not(:-moz-handler-blocked) .mjlogo .mustache span.r b {
margin-top:-6px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment