用html和css做动态动物,CSS3 SVG实现可爱的动物哈士奇和狐狸动画

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

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

此演示高度实验性质——动画SVG滤镜目前仅在Chrome中可用。

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

话不多说，开始咯！

塑造动物外形

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

HTML标记

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