How to Make Pure CSS3 Simulation Penguin Walking Animation

How to Make Pure CSS3 Simulation Penguin Walking Animation: BY Douglas13 Nov,2020; Tags:
CSS3 Animation Penguin

Introduction

The emergence of CSS3 allows us to draw some graphics on web pages more flexibly, and even make some animations. This time we are going to share a penguin walking simulation animation based on pure CSS3. The appearance of the penguin is drawn through simple HTML elements combined with CSS. The animation effect of the penguin walking is achieved through the animation properties of CSS3. ,very cute.

How to Make Pure CSS3 Simulation Penguin Walking Animation

Instructions

HTML Body Code

<div class="penguin">
  <div class="body">
    <div class="eye"></div>
    <div class="eye"></div>
    <div class="beak"></div>
  </div>
  <div class="foot"></div>
  <div class="foot"></div>
</div>
<div class="clouds">
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
</div>
<div class="sun"></div>
<div class="rocks">
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
</div>

Css Code

.penguin {
  width: var(--size);
  height: var(--size);
  background: #000;
  position: absolute;
  top: calc( 50% - var(--size) / 2 );
  left: calc(50% - var(--size) / 2 );
  border-radius: 50% 50% 30% 30%;
  z-index: 10;
}
.penguin .body {
  width: 70%;
  height: 70%;
  position: absolute;
  left: 15%;
  top: 15%;
  border-radius: 50% 50% 30% 30%;
  background: linear-gradient(to bottom, black 49%, white 49%);
}
.penguin .body::before, .penguin .body::after {
  content: '';
  display: block;
  width: 60%;
  height: 25%;
  background: #000;
  position: absolute;
  top: 40%;
}
.penguin .body::after {
  right: 0;
  border-radius: 100% 81% 77% 100% / 62% 30% 78% 100%;
  -webkit-transform: rotate(-120deg);
          transform: rotate(-120deg);
  -webkit-animation: right-wing 7s infinite;
          animation: right-wing 7s infinite;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

VIEW NOW