使用CSS3制作SVG图标动画特效

04-23 次

标签 svg svg动画

在网页设计中，我们通常都会使用PNG图标和字体图标来作为我们的页面图标元素，但是如果使用SVG矢量图来作为图标可以为我们带来更多的好处：

作为矢量图格式，SVG可以任意缩放而不会变形失真。而且它的文件大小会比图片或字体图标的文件尺寸要小。
于字体图标不同，SVG图标可以由不同的颜色组成。
SVG图标可以使用CSS transitions、animations、原生的SVG<animate>元素或javascript来制作动画效果。

SVG图标动画可以单独移动图标中的某个部分，制作局部动画效果，而不是图标的整体动画，这也是图片和字体图标不能做到的。

在这篇文章中我们将举几个小例子，分别使用鼠标和几个SVG图标做交互动画，分别改变他们的填充色和制作内部动画等。这些SVG图标都是使用Adobe Illustrator来制作的。并在导出SVG文件时做了一些优化。SVG代码直接嵌入到了HTML代码中，使我们可以使用CSS来和它进行互动。

DEMO1：灯泡

灯泡SVG图形是这几个例子中最简单的，它有一个<polygon>元素和一个<path>元素组成。

<a id="light" xlink:href="#" >
  <polygon id="lightbulb-triangle" points="18.6,17.3 96.2,17.3 57.4,84.8"/>
  <path id="lightbulb" d="M58.1,43.6c0,0,7.2-4.4,4.5-6.7c0,0-1-0.7-2.2,1.8c0,0-1.2…" />
</a>

这些元素只是包含了呈现灯泡SVG图形所需的属性，我们还要在CSS中给他们填充颜色。

#lightbulb-triangle { fill: #efe7bc; }
#lightbulb { fill: transparent; stroke: #fff; }

fill属性不能够使用在HTML元素上，它只对SVG元素有效。我们可以使用CSS属性来改变SVG，包括:hover和transitions。

a#light polygon, a#light path { transition-duration: 1s; }
a#light:hover #lightbulb { stroke: #efe7bc; }
a#light:hover #lightbulb-triangle { fill: #000; }

DEMO2：可旋转的时钟

时钟的SVG图形要稍微复杂一些，可动画的部分有一个圆形和一个三角形组成。

<a id="clock" xlink:href="#" >
  <polygon id="clock-triangle" points="212.4,88.4 191.2,52.5 170,16.5 212.4,16.5 254.8,16.5 233.6,52.5"/>
  <path id="clock-circle" d="M228.9,42.3c-0.4,9-7.2,15.8-16.2,16.2c-9,0.4-15…."/>
  <path id="minute-hand" d="M213,30.5c0-0.3-0.5-0.3-0.5,0c-0.3,3.3-0.7… "/>
</a>

这个动画的背景渐变和上面的例子是相同的，但是时钟的旋转就有一些难做了：Firefox浏览器目前不能够正确的修改SVG元素的transform-origin。所以目前这个效果只能在webkit或Blink中正常工作。

@-webkit-keyframes timer { to { transform: rotate(1turn); } }
  a#clock path { fill: #fff; }
  #clock-triangle { fill: #bfe7dd; transition: 1s; }
  a#clock:hover #clock-triangle { fill: #000; }
  a#clock:hover path#minute-hand {
  transform-origin: center 110%;
  -webkit-animation: timer 2s forwards linear infinite;
}

DEMO2：标志

这个标志SVG图形需要动画的部分是最多的：

<a id="iris" xlink:href="#">
  <polygon id="iris-triangle" points="326,18.3 404.3,18.3 365.2,85.8"/>
  <path id="leaf5" d="M364.8,26.4l-6.2,11.2l-3.8 6.2C357.5,27.8,362.2,26.7,364.8,26.4"/>
  <path id="leaf4" d="M352.2,34.8l6.3,11.2l-7.3,0.1C349.6,41.7,351.1,37.2,352.2,34.8"/>
  <path id="leaf3" d="M352.8,49.6l12.8,0.2l-3.7,6.4C357.5,55.3,354.4,51.8,352.8,49.6"/>
  <path id="leaf2" d="M372.9,45.4l3.8,6.3c-2.9,3.6-7.5,4.6-10.2,4.8L372.9,45.4"/>
  <path id="leaf1" d="M380,36.8c1.7,4.3,0.1,8.8-1,11.2l-6.3-11.2L380,36.8"/>
  <path id="leaf6" d="M368.9,26.8c4.6,0.6,7.8,4.1,9.4,6.2l-12.8,0.3L368.9,26.8"/>
</a>

所有的SVG碎片都是朝圆心运动，这个运动的多少是根据元素的尺寸大小来决定，它会随着SVG的缩放而改变。

a#iris polygon { fill: #444341; transition: 1s; }
a#iris:hover polygon { fill: #000; }
a#iris path { fill: #fff; transform: scale(0.8) 50 50; transition-duration: .8s; }
a#iris:hover #leaf1 { transform: translateX(-3px); }
a#iris:hover #leaf2 { transform: translateX(-2px) translateY(-3px); }
a#iris:hover #leaf3 { transform: translateY(-3px) translateX(1px); }
a#iris:hover #leaf4 { transform: translateX(3px); }
a#iris:hover #leaf5 { transform: translateX(1px) translateY(3px); }
a#iris:hover #leaf6 { transform: translateX(-2px) translateY(3px); }