基於SVG與CSS3的可愛卡通小動物動畫特效

簡短教學

這是一款基於SVG濾鏡和CSS3製作的可愛小動物動畫特效。此特效中使用HTML標籤和SVG結合製作動物的外形，並透過CSS3 animation動畫來製作動物的各種動畫特效。

 使用方法

 HTML結構

該特效在創建動物時使用了不同的技術，在創建哈士奇時使用的是CSS border-radius屬性，而在創建狐狸時使用的是內聯的SVG背景圖像。

2個例子都使用嵌套的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>

哈士奇的身體多數以圓形和橢圓形為主，所以需要使用大量的border-radius屬性來製作。例如它的後腿的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('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'
    ));
  }
}

上面的程式碼會產生一個被編碼後的內聯的背景圖像。

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

哈士奇：

狐狸：

以上就是基於SVG和CSS3的可愛卡通小動物動畫特效的內容，更多相關網內容請關注PHPcnwww.