24
2018
02

SVG放大、倾斜、移动动画

 

SVG动画.html



<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
   ### type="rotate"

<svg width="120" height="120" viewBox="0 0 120 120">
  <polygon points="60,30 90,90 30,90" transform="translate(80)">
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 60 70"
      to="360 60 70"
      dur="10s"
      repeatCount="indefinite" />
  </polygon>
</svg>

### type="scale"

<svg width="120" height="120" viewBox="0 0 220 320">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
      attributeName="transform"
      type="scale"
      from="1"
      to="3"
      dur="2s"
      repeatCount="indefinite" />
  </polygon>
</svg>

### type="translate"

<svg width="120" height="120" viewBox="0 0 220 320">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="150 250"
      dur="2s"
      repeatCount="indefinite" />
  </polygon>
</svg>

### type="skewX"

<svg width="120" height="120" viewBox="0 0 220 220">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
      attributeName="transform"
      type="skewX"
      from="0 0"
      to="50"
      dur="2s"
      repeatCount="indefinite" />
  </polygon>
</svg>

### type="skewY"

<svg width="120" height="120" viewBox="0 0 220 220">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
      attributeName="transform"
      type="skewY"
      from="0 0"
      to="50"
      dur="2s"
      repeatCount="indefinite" />
  </polygon>
</svg>
</body>

</html>

« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。