Effets spéciaux d'animation d'animaux de dessin animé mignon basés sur SVG et CSS3

Bref tutoriel

Il s'agit d'un effet spécial d'animation d'animaux mignons basé sur le filtre SVG et CSS3. Dans cet effet spécial, les balises HTML et SVG sont utilisées pour créer l'apparence de l'animal, et l'animation CSS3 est utilisée pour créer divers effets d'animation de l'animal.

Comment utiliser

Structure HTML

Cet effet spécial utilise différentes technologies lors de la création d'animaux Lors de la création du husky, la propriété CSS border-radius est utilisée. image d’arrière-plan SVG en ligne.

Les deux exemples utilisent des divs imbriqués comme corps de l'animal. Une combinaison raisonnable de ces éléments est bénéfique pour créer des effets d'animation pour chaque partie du mouvement de l'animal.

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

Le corps des Huskies est principalement rond et ovale, ils doivent donc utiliser de nombreux attributs de rayon de bordure pour les fabriquer. Par exemple, le code CSS de ses pattes arrière est :

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

D'autres parties ne peuvent pas être créées en utilisant uniquement l'attribut border-radius et doivent être combinées avec transform, comme les pattes avant d'un husky.

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

Pour la création des parties du corps du renard, l'auteur a utilisé Adobe Illustrator pour créer les graphiques, puis a enregistré les parties individuelles sous forme de graphiques SVG. Enfin, utilisez Sass-SVG pour le convertir en style CSS :

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

Le code ci-dessus générera une image d'arrière-plan en ligne codée.

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

Husky :

Fox :

Ce qui précède est basé sur SVG et CSS3 Contenu d'effets spéciaux d'animation d'animaux de dessin animé mignon, pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !