CSS Panda

Panda Created with pure CSS. This tutorial will surely give you goosebumps when you will recreate the animated cute little panda with CSS. You are going to enjoy this tutorial if you love CSS ( or Panda or both). Let's begin with the code.

The HTML Code

Copy the HTML code below to your project

The CSS Code

Copy the CSS code below to your css file

html,body{
    padding:0;
    margin:0;
}
.wrapper{
    padding:200px;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    background-color: #f4d2c5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23eaa58b' fill-opacity='0.5' d='M0,224L80,218.7C160,213,320,203,480,170.7C640,139,800,85,960,106.7C1120,128,1280,224,1360,272L1440,320L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23eaa58b' fill-opacity='0.5' d='M0,224L80,218.7C160,213,320,203,480,170.7C640,139,800,85,960,106.7C1120,128,1280,224,1360,272L1440,320L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23eaa58b' fill-opacity='0.5' d='M0,224L80,218.7C160,213,320,203,480,170.7C640,139,800,85,960,106.7C1120,128,1280,224,1360,272L1440,320L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23eaa58b' fill-opacity='0.5' d='M0,224L80,218.7C160,213,320,203,480,170.7C640,139,800,85,960,106.7C1120,128,1280,224,1360,272L1440,320L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100vh,120% 100vh,130% 100vh, 140% 100vh;
    /* background-position: 0 100vh,-100px 100vh, -200px 100vh, -300px 100vh; */
    background-position: left bottom;
    background-size: cover;
    background-position:left bottom,center bottom, right bottom, -400px bottom;
}

.panda{
    width: 270px;
    height: 225px;
    left:50%;
    top:50%;
    margin:-112px 0 0 -135px; 
    position: absolute;
}
.panda .face{
    width: 270px;
    height: 225px;
    z-index:9;
    display: block;
    position: relative;
    background-color: #ffffff;
    border-radius: 60% 60% 42% 42%/ 66% 65% 50% 50%;
}
.panda .ear{
    top: -26px;
    width: 134px;
    height: 134px;
    z-index: 7;
    display: block;
    border-radius: 50%;
    position: absolute;
    background-color: #212121;
}
.panda .ear.left{
    left: -33px;

}
.panda .ear.right{
    left: 167px;
}
.panda .eye{
    z-index: 10;
    top: 67px;
    width: 96px;
    height: 102px;
    display: block;
    position: absolute;
    background-color: #212121;
    border-radius: 65% 35% 64% 35% / 53% 48% 55% 40%;
}
.panda .eye.left{
    left: 23px;
}
.panda .eye.right{
    left: 155px;
    transform: rotateY(180deg);
}
.panda .eye.left:before,
.panda .eye.right:before{
    content: "";
    position: absolute;
    left: 56px;
    top: 23px;
    display: block;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    border-radius: 50%;
    z-index: 9;
    -webkit-animation: blink 3s ease-in-out infinite;
}

.panda .nose{  
    position: absolute;
    left: 117px;
    top: 160px;
    display: block;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #212121;
    z-index: 999;
}
@-webkit-keyframes blink {
  0% {
    height: 24px;
  }
  10% {
    height: 4px;
  }
  20% {
    height: 24px;
  }
}

Thank you for reading the article. Share with your friends.

CSS Panda

The HTML Code

The CSS Code

Leave a Reply Cancel reply