HTML
<a class="bappzi" target="_blank" href="http://bappzi.com">bappzi</a>
<div class="viewport">
<div class="context">
<center>
<div class="css-md-icon refere-nce" icon="md-github" size="20em">
<div class="head">
<div class="ears"></div>
<div class="face">
<div class="eyes blinking">
<div class="pupils"></div>
</div>
<div class="snout"></div>
</div>
<div class="whiskers"></div>
</div>
<div class="body">
<div class="legs">
<div class="leg1"></div>
<div class="leg2"></div>
<div class="leg3"></div>
<div class="leg4"></div>
</div>
<div class="tentacle">
<div class="suction-cups">
<div class="g1"></div>
<div class="g2"></div>
<div class="g3"></div>
</div>
</div>
</div>
<div class="droplet dripping"></div>
<div class="puddle">
<div class="reflection">
<div class="legs">
<div class="leg1"></div>
<div class="leg2"></div>
<div class="leg3"></div>
<div class="leg4"></div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
LESS
// --- a pen by @jjyepez
@color-1: #333;
@color-2: #F4CBB2;
@color-3: white;
@color-4: skyblue;
@color-5: maroon;
.bappzi{ z-index: 10; position:fixed; top:1em; right:1.5em; font-family:Ubuntu,OpenSans,sans-serif,Tahoma; font-weight: bold; color: rgba(127,127,127,.35); text-decoration: none;}
.reference{
background-image: url(https://pbs.twimg.com/media/B7PeiopCMAE81Nq.jpg:medium);
background-size: cover;
background-position: center;
div{ opacity: .75; }
}
*{ box-sizing: border-box; }
.viewport{
display: table;
position: fixed;
top:0; left:0;
width:100%; height:100%;
}
.context{
display: table-cell;
vertical-align: middle;
text-align: center;
background: #212;
.css-md-icon {
position: relative;
min-width: 1em;
min-height: 1em;
div{
position: absolute;
transform-origin: center;
}
.head{
z-index: 2;
background-color: @color-1;
height:45.5%;
width: 60%;
top: 9%;
left: 19.5%;
border-radius: 47% 48% 35% 42%;
transform: skew(-2deg);
.ears{
position: absolute;
height: 30%;
width: 100%;
top: -7%;
left: 0;
//border-radius: 35% 37% 40% 47%;
&:before{
position: absolute;
content: " ";
background-color: @color-1;
height: 135%;
width: 30%;
top: 8%;
right: 7.5%;
border-radius: 100% 0% 100% 30%;
transform: rotate(-10deg) skew(7deg);
}
&:after{
position: absolute;
content: " ";
background-color: @color-1;
height: 135%;
width: 30%;
top: 8%;
left: 4%;
border-radius: 100% 0% 100% 30%;
transform: scaleX(-1) rotate(-10deg) skew(7deg);
}
}
.whiskers {
z-index: 0;
position: absolute;
top: 70%;
border-top: 2px solid @color-1;
width:177%;
height: 45%;
left: -37%;
border-radius: 23%;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
&:before{
content: " ";
position: absolute;
top: 10%;
border-top: 2px solid @color-1;
width:101%;
height: 160%;
left: -1%;
border-radius: 23%;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
}
.face {
z-index: 1;
position: absolute;
background-color: @color-2;
height: 51%;
width: 74.5%;
top: 45%;
left: 13.7%;
border-radius: 35% 37% 40% 47%;
&:before{
position: absolute;
content: " ";
background-color: @color-2;
height: 90%;
width: 70%;
top: -3%;
left: 1.25%;
border-radius: 50% 0 0 50%;
transform: rotate(5deg) skew(15deg);
}
&:after{
position: absolute;
content: " ";
background-color: @color-2;
height: 90%;
width: 70%;
top: -3%;
right: 1%;
border-radius: 0 51% 50% 0;
transform: rotate(-5deg) skew(-13deg);
}
.eyes{
z-index: 1;
height:55%;
width:77%;
left: 12%;
top: 15%;
&:before{
content: " ";
position: absolute;
height:100%;
width:27%;
left: 0;
top: 0;
background-color: @color-3;
border-radius: 100% 100%;
}
&:after{
content: " ";
position: absolute;
height:100%;
width:27%;
right: 0;
top: 0;
background-color: @color-3;
border-radius: 100% 100%;
}
&.blinking .pupils:before{
animation: 4s blinking ease 4.015s infinite;
}
&.blinking .pupils:after{
animation: 4s blinking ease 4s infinite;
}
.pupils {
color: @color-2;
z-index: 2;
position: absolute;
height:100%;
width:100%;
left: 0;
top: 0;
opacity: .7;
&:before {
font-size: 75%;
position: absolute;
content: "⚫";
padding:0 .5em 0 .15em;
background-color: @color-5;
width: 11%;
height: 70%;
top: 14.5%;
left: 4.5%;
border-radius: 100%;
}
&:after {
font-size: 75%;
position: absolute;
content: "⚫";
padding:0 .5em 0 .15em;
background-color: @color-5;
width: 11%;
height: 70%;
top: 14%;
right: 4.5%;
border-radius: 100%;
}
}
}
}
.snout {
z-index: 3;
position: absolute;
width: 22%;
height: 40%;
left: 39%;
top: 50%;
&:before{
position: absolute;
content: " ";
width: 21%;
height: 23%;
top: 31%;
left: 42%;
background-color: @color-5;
border-radius: 100%;
opacity:.65;
}
&:after{
position: absolute;
content: " ";
width: 40%;
height: 40%;
top: 42%;
left: 26%;
border-bottom: 3px solid @color-5;
border-right: 3px solid @color-5;
border-left: 2px solid transparent;
border-top: 2px solid transparent;
border-radius: 100%;
opacity:.7;
transform: rotate(45deg);
}
}
}
.body {
z-index: 1;
position: absolute;
width: 25%;
height: 25%;
top: 51%;
left: 37.5%;
border-top: 31px solid @color-1;
border-radius: 200% 200% 50% 50%;
&:before {
content: " ";
position: absolute;
width: 72%;
height:137%;
left:15%; top: -38%;
border-top: 11px solid @color-1;
border-radius: 100%;
}
.tentacle{
z-index: 0;
position: absolute;
width: 95%;
height:100%;
top: -55%;
left: -80%;
overflow: hidden;
border-radius: 10%;
&:before{
content: " ";
position:absolute;
bottom:5%;
right:9%;
height:100%;
width:60%;
border-bottom: 20px solid @color-1;
border-left: 11px solid transparent;//@color-3;
//border-top: 1px solid transparent;
border-radius: 0% 0% 0% 70%;
transform-origin: right bottom;
transform: rotate(-3deg) skew(-2deg);
}
&:after{
content: " ";
position:absolute;
top:-18%;
left:20%;
height:80%;
width:50%;
border-top: 15px solid @color-1;
border-radius: 50% 0% 0% 0%;
transform-origin: left top;
transform: rotate(60deg);
}
.suction-cups {
z-index: 2;
position: absolute;
width:100%;
height:100%;
opacity: .75;
.g1{
position: absolute;
width:6%;
height:6%;
background-color: @color-4;
left:10%;
top:3%;
border-radius: 100%;
&:before{
position: absolute;
content: " ";
width:125%;
height:115%;
background-color: @color-4;
left:135%;
top:125%;
border-radius: 100%;
transform: rotate(10deg);
}
&:after{
position: absolute;
content: " ";
width:125%;
height:130%;
background-color: @color-4;
left:242%;
top:295%;
border-radius: 100%;
transform: rotate(20deg);
}
}
.g2{
position: absolute;
width:7.5%;
height:7.5%;
background-color: @color-4;
left:31%;
top:33%;
border-radius: 100%;
transform: rotate(16deg);
&:before{
position: absolute;
content: " ";
width:108%;
height:115%;
background-color: @color-4;
left:111%;
top:123%;
border-radius: 100%;
transform: rotate(7deg);
}
&:after{
position: absolute;
content: " ";
width:107%;
height:102%;
background-color: @color-4;
left:237%;
top:220%;
border-radius: 100%;
transform: rotate(5deg);
}
}
.g3{
position: absolute;
width:8%;
height:10%;
background-color: @color-4;
left:56%;
top:61%;
border-radius: 100%;
&:before{
position: absolute;
content: " ";
width:108%;
height:100%;
background-color: @color-4;
left:135.5%;
top:21%;
border-radius: 100%;
}
&:after{
position: absolute;
content: " ";
width:100%;
height:100%;
background-color: @color-4;
left:296%;
top:17%;
border-radius: 100%;
}
}
}
}
}
.droplet {
z-index: 2;
position: absolute;
transform-origin:center top;
transform: scaleX(.5);
width: 4%;
height:4%;
left:16%;
top:56%;
&:before{
content: " ";
position: absolute;
width: 100%;
height: 100%;
background-color: @color-4;
left:0;
top:0;
border-radius: 0 100% 100% 100%;
transform: rotate(45deg);
}
&.dripping{
animation: dripping ease-in 3s infinite;
}
}
.legs{
z-index: 2;
position: absolute;
width: 100%;
height:150%;
left:0; top: 0;
.leg1{
position: absolute;
width:32%;
height:91.5%;
left:-12.5%; top:-5%;
border-radius: 0 0 32% 5px;
overflow:hidden;
&:before {
position:absolute;
content:" ";
width: 350%;
height: 50%;
right:0%;
bottom:-7%;
border-right: 16px solid @color-1;
border-radius: 0 0 50% 0;
}
&:after {
position:absolute;
content:" ";
width: 0%;
height: 70%;
top: -5%;
right:0%;
border-left: 16px solid @color-1;
border-radius: 50% 0 0 0;
}
}
.leg2{
position: absolute;
width:32%;
height:100%;
left:16%; top:-5%;
border-radius: 0 0 32% 5px;
overflow:hidden;
&:before {
position:absolute;
content:" ";
width: 350%;
height: 50%;
right:0%;
bottom:-7%;
border-right: 16px solid @color-1;
border-radius: 0 0 50% 0;
}
&:after {
position:absolute;
content:" ";
width: 0%;
height: 70%;
top: -5%;
right:0%;
border-left: 16px solid @color-1;
border-radius: 0;
}
}
.leg3{
position: absolute;
width:32%;
height:100%;
right:12%; top:-5%;
border-radius: 0 0 32% 5px;
overflow:hidden;
transform: scaleX(-1);
&:before {
position:absolute;
content:" ";
width: 350%;
height: 50%;
right:0%;
bottom:-7%;
border-right: 16px solid @color-1;
border-radius: 0 0 50% 0;
}
&:after {
position:absolute;
content:" ";
width: 0%;
height: 70%;
top: -5%;
right:0%;
border-left: 16px solid @color-1;
border-radius: 0;
}
}
.leg4{
position: absolute;
width:32%;
height:91.5%;
right:-15%; top:-5%;
border-radius: 0 0 32% 5px;
overflow:hidden;
transform: scaleX(-1);
&:before {
position:absolute;
content:" ";
width: 350%;
height: 50%;
right:0%;
bottom:-7%;
border-right: 16px solid @color-1;
border-radius: 0 0 50% 0;
}
&:after {
position:absolute;
content:" ";
width: 0%;
height: 70%;
top: -5%;
right:0%;
border-left: 16px solid @color-1;
border-radius: 50% 0 0 0;
}
}
}
.puddle {
z-index: 0;
position: absolute;
background-color: @color-4;
height: 20%;
width: 57%;
bottom: 6%;
left: 22%;
border-radius: 100%;
overflow: hidden;
.reflection{
z-index: 1;
position: absolute;
width: 44.5%;
height: 100%;
top: 15%;
left: 27%;
border-radius: 200% 200% 50% 50%;
.legs { // --- reflected legs
transform: scaleY(-1);
opacity: .3;
.leg2, .leg3{
top: -20%;
}
}
}
}
&[size="20em"]{
width: 20em;
padding-top: 20em;
}
}
}
@keyframes blinking{
3%{ transform: scaleY(1); border-radius:100%; }
5%{ transform: scaleY(.2); border-radius:0; }
6%{ transform: scaleY(1); border-radius:100%; }
8%{ transform: scaleY(1); border-radius:100%; }
9%{ transform: scaleY(.2); border-radius:0; }
10%{ transform: scaleY(1); border-radius:100%; }
}
@keyframes dripping{
0%{margin-top:0;opacity:0;transform: scale3d(0,0,1)}
50%{opacity:1;transform: scale3d(.5,1,1)}
51%{margin-top:0;}
80%{margin-top:27%;opacity:1;}
80.1%{margin-top:27%;opacity:.5;transform: scale3d(.5,1,1)}
90%{margin-top:27%;opacity:.1;transform: scale3d(3,1,1) translateX(0)}
100%{margin-top:27%;opacity:0;transform: scale3d(3,1,1) translateX(20px)}
}
