Heim > Web-Frontend > H5-Tutorial > Hauptteil

Niedliche Cartoon-Tieranimations-Spezialeffekte basierend auf SVG und CSS3

黄舟
Freigeben: 2017-01-19 13:48:20
Original
1831 Leute haben es durchsucht

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>
Nach dem Login kopieren

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%;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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(&#39;path&#39;, (
      fill: $color-nose,
      d: &#39;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&#39;
    ));
 
    // the line connecting the nose to the mouth
    @include svg(&#39;path&#39;, (
      stroke: $color-nose,
      fill: none,
      d: &#39;M83.7,102.3V86.7&#39;
    ));
 
    // the mouth
    @include svg(&#39;path&#39;, (
      stroke: $color-nose,
      fill: none,
      d: &#39;M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-5.6,0-10.8,2.7-10.8,2.7&#39;
    ));
  }
}
Nach dem Login kopieren

Der obige Code generiert ein codiertes Inline-Hintergrundbild.

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

Husky:

Niedliche Cartoon-Tieranimations-Spezialeffekte basierend auf SVG und CSS3

Fox:

Niedliche Cartoon-Tieranimations-Spezialeffekte basierend auf SVG und CSS3

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


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage