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

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.

Advertisement

How to Make Pure CSS3 Simulation Penguin Walking Animation
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;
}                        

Advertisement