SVG-Animation

SVG动画有多牛?先看看吧,人家的

demo1
资料

其实一开始我就想学学 这样的效果
简单说一下实现吧,不想看可以直接飞机票

本例中用到了盒子布局

body{
      display:flex;
   }
 里面用到  -webkit-box-pack ="center" body 所有子元素居中对齐。 
 还有,关于 display 到兼容性问题。。。

display
webkit兼容性
下面是我们的svg文件,这就是主角 魔天伦的盒子

先实现左右摇摆


   
 
    
     

animateTransform 指定类型 rotate 设置关键值,values '0,0,0'第一个值角度,2,3分别指x,y坐标 colcMode

再实现绕圆转圈

#motion#carriage魔天伦盒子
实现
                                              ---whell 魔天伦
           ---加载圆为动画轨迹
                                                  ---两个盒子(组合)
                                                  --其中一个
                            ---引用圆为动画轨迹
                    --指定动画
              
                       ---左右摇摆动画
                ........
               
         
                                                  ---第二个
            
    


你可能感兴趣的:(SVG-Animation)