Cute cartoon animal animation special effects based on SVG and CSS3

Brief Tutorial

This is a cute animal animation special effect based on SVG filter and CSS3. This special effect uses HTML tags and SVG to create the shape of the animal, and uses CSS3 animation to create various animation effects of the animal.

How to use

HTML structure

This special effect uses different technologies when creating animals. When creating the husky, the CSS border-radius property is used, and when creating the husky, the CSS border-radius property is used. Fox uses an inline SVG background image.

Both examples use nested divs as the body of the animal. A reasonable combination of these elements is beneficial to creating animation effects for each part of the animal's movement.

<!-- Markup for the fox head -->
<div class="fox-head">
  <div class="fox-face">            
    <div class="fox-ears">
      <div class="fox-ear"></div>
      <div class="fox-ear"></div>
    </div>
    <div class="fox-skull"></div>
    <div class="fox-front"></div>
    <div class="fox-eyes"></div>
    <div class="fox-nose"></div>
  </div>
</div>
 
<!-- Markup for the husky head -->
<div class="husky-head">
  <div class="husky-ear"></div>
  <div class="husky-ear"></div>
  <div class="husky-face">
    <div class="husky-eye"></div>
    <div class="husky-eye"></div>
    <div class="husky-nose"></div>
    <div class="husky-mouth">
      <div class="husky-lips"></div>
      <div class="husky-tongue"></div>
    </div>
  </div>
</div>

Huskies’ bodies are mostly round and oval, so they need to use a lot of border-radius attributes to make them. For example, the CSS code of its hind legs is:

.husky-hind-leg {
  // ...
  border-top-left-radius: 35% 100%;
  border-top-right-radius: 40% 100%;
}

Other parts cannot be made using the border-radius attribute alone and must be combined with transform, such as the front legs of a husky.

.husky-front-legs > .husky-leg:before {
  transform: skewY(-30deg) skewX(10deg);
  transform-origin: top right;
}

For the creation of the fox body parts, the author used Adobe Illustrator to create the graphics and then saved the individual parts as SVG graphics. Finally, use Sass-SVG to convert it into a CSS style:

.fox-nose:before {
  @include svg((viewBox: (0 0 168 168))) {
    // the nose
    @include svg('path', (
      fill: $color-nose,
      d: 'M83.7,86.7c3.3,0,11.6-3.9,11.6-7.1c0-3.2-9.4-3.2-11.6-3.2c-2.2,0-11.6,0-11.6,3.2   C72.1,82.8,80.4,86.7,83.7,86.7z'
    ));
 
    // the line connecting the nose to the mouth
    @include svg('path', (
      stroke: $color-nose,
      fill: none,
      d: 'M83.7,102.3V86.7'
    ));
 
    // the mouth
    @include svg('path', (
      stroke: $color-nose,
      fill: none,
      d: 'M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-5.6,0-10.8,2.7-10.8,2.7'
    ));
  }
}

The above code will generate an encoded inline background image.

.fox-nose:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg...");
}

Husky:

Fox:

The above is a cute cartoon based on SVG and CSS3 For content on small animal animation special effects, please pay attention to the PHP Chinese website (www.php.cn) for more related content!