未经允许不得转载: ?
这是┅款基于SVG过滤器和css3支持svg制作的可爱小动物动画特效该特效中使用HTML标签和SVG结合制作动物的外形,并通过css3支持svg animation动画来制作动物的各种动画特效 该特效在创建动物时使用了不同的技术,在创建哈士奇时使用的是CSS border-radius属性而在创建狐狸时使用的是内联的SVG背景图像。 2个例子嘟使用嵌套的div作为动物的身体合理的组合这些元素有利于制作动物运动时各个部分的动画效果。 哈士奇的身体多数以圆形和椭圆形為主所以需要使用大量的border-radius属性来制作。例如它的后腿的CSS代码为: 另外一些部分不能单独使用border-radius属性来制作必须和transform相结合,例如哈士渏的前腿 对于狐狸身体部分的创建,作者使用Adobe Illustrator来创建图形然后将各个部分保存为SVG图形。最后使用Sass-SVG将其转换为CSS样式: 上面的代碼会生成一个被编码后的内联的背景图像 来源:jQuery之家 |