早上无意中进入了一个网站，看到他们的LOGO效果有点丑，如图：一开始以为是gif动画什么的，后来查看了元素，发现是用SVG实现的+CSS3动画，一下子勾起了我的（hao）欲（qi）望（xin），决定一探究竟，查看代码后发现，原理就是这么简单：多个SVG笔画动画使用不同的animation-delay！对于形状SVG元素或者文本SVG元素，可以使用stroke-dasharray来控制笔划的间隔样式，可以使用stroke-dashoffset来控制笔划的偏移量，从而实现笔划动画效果，更具体的请看张大神《纯CSS实现帅气的SVG路径描边动画效果》先来实现一个简单的文字描边动画：segmentfault.com.text{字体大小：64px；字体粗细：粗体；文本转换：大写；填写：无；中风：#3498db；描边宽度：2px；中风-dasharray：90310；动画：stroke6s无限线性；}@keyframesstroke{100%{stroke-dashoffset:-400;}}DemoURL:http://output.jsbin.com/demic...然后我们同时使用多个stroke动画，设置不同的animation-delays:segmentfault.comsegmentfault.comsegmentfault.comsegmentfault.com注意：想放多少颜色就放多少text.text{font-size:64px;font-weight:bold;text-transform:uppercase;fill:none;stroke-width:2px;stroke-dasharray:90310;animation:stroke6sinfinitelinear;}.text-1{stroke:#3498db;text-shadow:005px#3498db;animation-delay:-1.5s;}.text-2{stroke:#f39c12；文字阴影：005px#f39c12；动画延迟：-3s；}.text-3{描边：#e74c3c；文字阴影：005px#e74c3c；动画延迟：-4.5秒；}.text-4{stroke:#9b59b6;text-shadow:005px#9b59b6;animation-delay:-6s;}@keyframesstroke{100%{stroke-dashoffset:-400;}}你完成了，演示地址：http://output.jsbin.com/vuyuv...注意几点：animation-delay的设置和每个元素的动画总时长要协调好stroke-dashoffset和stroke-dasharray的设置要协调好
