CSS3 SVG实现可爱的动物哈士奇和狐狸动画

我想向大家展示如何巧妙地使用HTML、CSS排序动画和SVG滤镜把生活中可能最可爱的东西之一——动物画到网页上。我们将探讨绘制动物的两种技术：一种使用纯HTML和CSS，另一种使用内联SVG背景图像。

所涉及的动画也很复杂，因此本教程将重点介绍创建这些动物以及栩栩如生的动作所涉及的不同技术。放飞你的创意，自行创作独特和俏皮的动物动画吧。

话不多说，开始咯！

塑造动物外形

演示使用两种不同的技术来创建动物不同身体部位的形状。哈士奇使用CSS border-radius属性，狐狸使用内联背景SVG图像，因为后者的形状更复杂。

HTML标记

两只动物都使用嵌套的HTML部分对身体部位进行分组。分组的概念对于创造逼真的动画效果非常重要——当头部移动时，眼睛和耳朵也应该保持一起移动，因为它们是长在头上的。

<!-- 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>
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路 

每个部分均可以独立移动，并随着其父元素的移动而移动，这样会产生更逼真的效果。不知道你发现没有，尾巴是深深嵌套到其他尾部组件中的。当每个尾巴部分相对于其母体定位，然后旋转相同的量时，就会产生均匀曲线的视觉感。

用CSS塑造图形

CSS的border-radius属性大量用来塑造哈士奇的形象。对于许多元素要素，需要对每个边界半径进行逐个控制。例如，下面是如何构造哈士奇后腿的代码：

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

第一个数字表示曲线从顶部/底部边缘开始的深度，第二个数字表示曲线从左/右边缘开始的深度。

其他形状，如前腿，不能单独用border-radius成形，需要使用transform成形：

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

一旦图形就位，那么每个元素就能在其父元素中被赋予绝对的基于百分比的位置。这确保每个身体部位的精确放置以及响应性。

用SVG塑造图形

至于狐狸，Sass-SVG被用来为每个身体部位创建复杂的SVG形状。SVG图像可以用作背景图像，更好的是，只要它们是基于64或UTF-8编码的，就可以被内联编写（为了最大限度的浏览器支持）。

不过，SVG代码手写起来非常棘手。我使用Adobe Illustrator来创建初始形状：