SVG と CSS3 に基づいたかわいい漫画の動物アニメーションの特殊効果-H5 チュートリアル-php.cn

SVG と CSS3 に基づいたかわいい漫画の動物アニメーションの特殊効果

黄舟

リリース： 2017-01-19 13:48:20

オリジナル

1826 人が閲覧しました

簡単なチュートリアル

これは、SVG フィルターと CSS3 に基づいたかわいい動物アニメーションの特殊効果です。この特殊効果では、HTML タグと SVG を使用して動物の外観を作成し、CSS3 アニメーションを使用して動物のさまざまなアニメーション効果を作成します。

HTML 構造の使用方法

この効果は、動物の作成時にさまざまなテクニックを使用します。ハスキー犬の作成時には CSS の border-radius プロパティが使用され、キツネの作成時にはインライン SVG 背景画像が使用されます。

どちらの例でも、動物の体としてネストされた div を使用しています。これらの要素を適切に組み合わせると、動物の動きの各部分にアニメーション効果を作成するのに役立ちます。

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

ログイン後にコピー

ハスキーの体はほとんどが丸くて楕円形なので、それらを作成するには多くの境界半径属性を使用する必要があります。たとえば、後ろ足の CSS コードは次のとおりです。

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

ログイン後にコピー

ハスキーの前足など、他の部分は border-radius 属性だけを使用して作成することはできず、transform と組み合わせる必要があります。

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

ログイン後にコピー

キツネの体のパーツを作成するために、作者は Adobe Illustrator を使用してグラフィックを作成し、個々のパーツを SVG グラフィックとして保存しました。最後に、Sass-SVG を使用して CSS スタイルに変換します。

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

ログイン後にコピー

上記のコードは、エンコードされたインライン背景画像を生成します。

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

ログイン後にコピー

ハスキー:

SVG と CSS3 に基づいたかわいい漫画の動物アニメーションの特殊効果キツネ:

上記は、SVG と CSS3 に基づいたかわいい漫画の動物アニメーションの特殊効果のコンテンツです。その他の関連コンテンツについては、PHP 中国語 Web サイト (www. .php.cn）！