Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
	list-style:none;
}
.svgs {
	width:500px;
	height:500px;
	background:rgba(0,0,0,1);
	animation:name 2s ease-out;
	animation-fill-mode:both;
	text-align:center;
}
.alibaba {
	animation:lineMove 3s ease-out;
	animation-delay:2s;
	animation-fill-mode:both;
	stroke:#fff;
}
@keyframes name {
	0% {
	width:500px;
	height:500px;
	border-radius:10%;
}
100% {
	width:200px;
	height:200px;
	border-radius:50%;
}
}@keyframes lineMove {
	0% {
	stroke-dasharray:0,2694.88623046875;
}
50% {
	stroke-dasharray:2694.88623046875,2694.88623046875;
	fill:rgba(0,0,0,0);
	opacity:1;
}
100% {
	stroke-dasharray:2694.88623046875,2694.88623046875;
	fill:rgba(255,255,255,1);
	opacity:1;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

svg+css3动画

0