小编Mad*_*man的帖子

使用填充动画svg

如何使用ilustrator的路径svg制作动画.在完成make对象后,我从ilustrator cs6获得了svg代码(路径).

对于动画,我使用没有javascript的css3(动画).所以,我把svg代码放入html文件,对象的动画,它的工作,但我的问题是:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<style>
            .map {
	          fill: none;
              stroke: #FFF;
              stroke-dasharray: 5000;
              stroke-dashoffset: 5000;
            }
            .animate {
              -webkit-animation: dash 100s linear alternate;
              animation: dash 100s linear alternate;
              -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
            }
            @keyframes dash {
                from {
                    stroke-dashoffset: 5000; fill: #FFF !important;
                }
                to {
                    stroke-dashoffset: 0; fill: #FFF !important;
                }
            } 
            @-webkit-keyframes dash {
                from {
                    stroke-dashoffset: 5000;
                }
                to {
                    stroke-dashoffset: 0;
                }
            }             		
	</style>
</head>
<body …

Run Code Online (Sandbox Code Playgroud)

svg path css3 jquery-animate

Mad*_*man

lucky-day

5
推荐指数

0
解决办法

556
查看次数