<div class="dog">
<div class="head">
<div class="ears"></div>
<div class="eyes">
<div class="eye1"></div>
<div class="eye2"></div>
</div>
<div class="mouth">
<div class="boop"></div>
<div class="tongue"></div>
</div>
<div class="lower-head"></div>
</div>
<div class="heart"></div>
<div class="belt"></div>
<h4>And I call him Pixel</h4>
</div>
<div class="credit">created by Bipul Kumar</div>
.credit{
position: fixed;
bottom: 10px;
color: #000;
font-size: 0.8em;
}
h4{text-align: center;}
body{
background: #F4B558;
color: #fff;
position: realtive;
display: flex;
justify-content: center;
}
.dog{
position: relative;
z-index: 99;
margin-top: 100px;
.head{
background: linear-gradient(#6B7D8E 60% , transparent 40%);
height: 200px;
width: 200px;
border-radius: 90% / 100% ;
margin-top: 50px;
position: relative;
z-index: 99;
transform-style: preserve-3d;
transform: translateZ(15px) rotate(-5deg);
animation: headnode 3s infinite;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
&::after{
content: "";
position: absolute;
bottom: 40px;
background: transparent;
height: 20px;
border-top: 20px solid transparent;
border-radius: 40% / 150%;
box-shadow: 0 -20px 0px 0px #fff;
left: 0px;
width: 200px;
}
.eyes{
top: 30px;
position: absolute;
&::before{
content: "";
position: absolute;
background: #fff;
height: 80px;
width: 80px;
border-top-left-radius: 100px;
border-top-right-radius: 50%;
margin-left: 20px
}
&::after{
content: "";
position: absolute;
background: #fff;
height: 80px;
width: 80px;
left: 100px;
border-top-left-radius: 50%;
border-top-right-radius: 100px;
}
.eye1{
height: 30px;
width: 25px;
border-radius: 50%;
background: rgb(139, 189, 217);
position: absolute;
left: 50px;
top: 35px;
transform-origin: 100% 0%;
&::after{
content:"";
background: #000;
height: 15px;
width: 15px;
position: absolute;
border-radius: 100%;
top: 10px;
left: 5px;
}
&::before{
content:"";
background: #fff;
height: 5px;
width: 5px;
position: absolute;
border-radius: 100%;
top: 15px;
left: 15px;
z-index: 99;
animation: eyereflection 3s infinite;
}
}
.eye2{
height: 30px;
width: 25px;
border-radius: 50%;
background: rgb(139, 189, 217);
position: absolute;
left: 120px;
top: 35px;
z-index: 99;
&::after{
content:"";
background: #000;
height: 15px;
width: 15px;
position: absolute;
border-radius: 100%;
top: 10px;
left: 5px;
}
&::before{
content:"";
background: #fff;
height: 5px;
width: 5px;
position: absolute;
border-radius: 100%;
top: 15px;
left: 15px;
z-index: 99;
animation: eyereflection 3s infinite;
}
}
}
.ears{
z-index: 1;
&::before{
content: "";
position: absolute;
background: #D4D7DE;
height: 0px;
width: 40px;
left: 20px;
border-right: 20px solid #6B7D8E;
border-top: 60px solid #D4D7DE;
box-shadow: 0px -5px 0 #6B7D8E;
border-top-left-radius: 100px;
transform: rotate(-32deg) translateZ(-15px) translateY(-40px);
z-index: 1;
}
&::after{
content: "";
position: absolute;
background: #D4D7DE;
height: 0px;
width: 40px;
left: 120px;
border-left: 20px solid #6B7D8E;
border-top: 60px solid #D4D7DE;
box-shadow: 0px -5px 0 #6B7D8E;
border-top-right-radius: 100px;
transform: rotate(32deg) translateZ(-15px) translateY(-40px);
z-index: 1;
}
}
.mouth{
background: #fff;
width: 110px;
height: 45px;
border-radius: 50% / 100%;
box-shadow: 0 3px 0 0 #000;
z-index: 99;
position: relative;
transform: translateX(45px) translateY(100px);
.boop{
width: 35px;
height: 20px;
background: #000;
border-radius: 80px 80px 150px 150px / 50px 50px 150px 150px;
transform: translateX(38px) translateY(13px);
&::after{
content:"";
position: absolute;
height: 8px;
width: 15px;
background: rgba(111, 126, 140, 0.6);;
border-radius: 100%;
left: 10px;
top: 3px;
}
}
.tongue{
background: linear-gradient(transparent 50% , #000 50%);
box-shadow: 0 5px 0 0 #fff;
height: 20px;
width: 60px;
border-radius: 100%;
position: relative;
z-index: 9;
margin-top: -8px;
transform: translateX(25px) translateY(25px);
animation: toungue-close 5s infinite;
animation-delay: 1.1s;
&::after{
content: "";
background: #E38B89;
position: absolute;
height: 40px;
width: 25px;
transform: translateX(18px) translateY(8px);
border-radius: 0 0 100% 100%;
animation: toungue 5s infinite;
animation-delay: 1s;
animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
}
}
.lower-head{
background: linear-gradient(transparent 50% , #D4D7DE 50%);
height: 160px;
width: 160px;
border-radius: 100%;
transform: translateX(20px) translateY(-6px);
z-index: 1;
position: relative;
&::after{
content: "";
position: absolute;
background: transparent;
height: 30px;
width: 30px;
bottom: 40px;
left: -25px;
border-radius: 50%;
box-shadow: 10px 10px 0 0 #D4D7DE;
transform: rotate(-90deg);
}
&::before{
content: "";
position: absolute;
background: transparent;
height: 30px;
width: 30px;
bottom: 40px;
right: -25px;
border-radius: 50%;
box-shadow: 10px 10px 0 0 #D4D7DE;
transform: rotate(-180deg);
}
}
}/*Head*/
.heart {
position: relative;
transform: translateX(20px) translateY(-40px);
z-index: 1;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 80px;
top: 0;
width: 80px;
height: 100px;
background: #D4D7DE;
border-radius: 90px 90px 0 0;
transform: rotate(-50deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(50deg);
transform-origin :100% 100%;
}
.belt{
background: transparent;
box-shadow: 0 10px 0 0 #26719f;
width: 120px;
height: 50px;
border-radius: 100%;
z-index: 99;
position: relative;
left: 40px;
top: -60px;
&::after{
content: "";
position: absolute;
background: #fff;
height: 40px;
width: 40px;
border-radius: 100% 0 0 0;
transform-origin: center;
transform: rotate(45deg) translateX(70px) translateY(12px);
z-index: 1;
}
}
}
/*Animations*/
@keyframes headnode {
0% {transform: rotateZ(-5deg);}
50% {transform: rotateZ(5deg);}
100% {transform: rotateZ(-5deg);}
}
@keyframes eyereflection {
0% {top: 15px;}
50% {top: 10px;}
100% {top: 15px;}
}
@keyframes toungue {
0% {height: 40px;}
20% {height: 0px;}
40% {height: 40px;}
100% {height: 40px;}
}
@keyframes toungue-close {
0% {height: 20px; margin-top: -8px;}
20% {height: 10px; margin-top: -3px;}
40% {height: 20px; margin-top: -8px;}
100% {height: 20px; margin-top: -8px;}
}
View Compiled
/*Inspired from Trello's Taco by Valentin Kirilov @dribble*/
/*Work in progress*/
/*Developed by Bipul Kumar*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.