svg中path css_CSS和SVG中的动画动物

svg中path css

View demo 查看演示 Download Source 下载源

Today we want to show you how the clever use of HTML, CSS sequenced animations, and SVG filters can bring to life one of the most unlikely (yet adorable) things to be seen on a web page – animals. We’ll explore two techniques for drawing the animals: one with plain HTML and CSS, and one with inline SVG background images.

今天，我们要向您展示如何巧妙地使用HTML，CSS排序动画和SVG过滤器，才能使网页上最不可能(但还很可爱)的事物之一-动物-栩栩如生。 我们将探索两种绘制动物的技术：一种使用纯HTML和CSS，另一种使用嵌入式SVG背景图像。

This demo is highly experimental – animated SVG filters are currently only available in Chrome. 该演示是高度实验性的-动画SVG过滤器目前仅在Chrome中可用。

The animations involved are also complex, so this tutorial will focus on the different techniques involved in creating each of these creatures and their life-like movements. It’s up to you to let your creative juices flow and create unique and playful animated animals on your own.

涉及的动画也很复杂，因此本教程将重点介绍创建每种生物及其逼真的动作所涉及的不同技术。 让您的创意汁液流动并自己创建独特而有趣的动画动物是您的责任。

With that said, let’s get started!

话虽如此，让我们开始吧！

塑造动物 (Shaping the Animals)

The demos use two different techniques for creating the shapes of the different body parts of the animals. The husky uses CSS border-radius properties, and the fox uses inline background SVG images, as the shapes are more complex.

演示使用两种不同的技术来创建动物不同身体部位的形状。 沙哑使用CSS边界半径属性，而狐狸使用嵌入式背景SVG图像，因为形状更加复杂。

标记 (The Markup)

Both animals use nested HTML divisions to group the body parts. The concept of grouping is important for creating life-like movements — when the head moves, the eyes and ears should always move too, as they are attached to the head.

两种动物都使用嵌套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&g