A Pen by Clément Noterdaem.

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>

Pure-CSS3-Mister-Jekyll-Logo.markdown

Pure CSS3 Mister Jekyll Logo

A little experiment of our logo into pure CSS3 code ;-) http://misterjekyll.be

A Pen by Clément Noterdaem on CodePen.

License.

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;
}