Niedliche Cartoon-Tieranimations-Spezialeffekte basierend auf SVG und CSS3

Kurzes Tutorial

Dies ist ein niedlicher Tieranimations-Spezialeffekt, der auf SVG-Filter und CSS3 basiert. Bei diesem Spezialeffekt werden HTML-Tags und SVG verwendet, um das Erscheinungsbild des Tieres zu erstellen, und CSS3-Animationen werden verwendet, um verschiedene Animationseffekte des Tieres zu erstellen.

So verwenden Sie

HTML-Struktur

Dieser Spezialeffekt verwendet beim Erstellen des Huskys die CSS-Eigenschaft border-radius Inline-SVG-Hintergrundbild.

In beiden Beispielen werden verschachtelte Divs als Körper des Tieres verwendet. Eine sinnvolle Kombination dieser Elemente ist vorteilhaft für die Erstellung von Animationseffekten für jeden Teil der Bewegung des Tieres.

<!-- 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>

Der Körper von Huskys ist meist rund und oval, daher müssen sie viele Randradiusattribute verwenden, um sie herzustellen. Der CSS-Code seiner Hinterbeine lautet beispielsweise:

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

Andere Teile können nicht allein mit dem Attribut border-radius erstellt werden und müssen mit transform kombiniert werden, wie beispielsweise die Vorderbeine eines Huskys.

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

Für die Erstellung der Fuchskörperteile nutzte der Autor Adobe Illustrator zur Erstellung der Grafiken und speicherte die einzelnen Teile anschließend als SVG-Grafiken ab. Verwenden Sie abschließend Sass-SVG, um es in einen CSS-Stil zu konvertieren:

.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'
    ));
  }
}

Der obige Code generiert ein codiertes Inline-Hintergrundbild.

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

Husky:

Fox:

Das Obige basiert auf SVG und CSS3 Niedliche Cartoon-Tieranimations-Spezialeffektinhalte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!