以上是svg的一个线上编辑器，也可以adobe Illustrator制作生成。

我们通过以上编辑器可以获得以下代码。

例：

Layer 1

给路径path 添加 class 为 path1

.path1 {

stroke-dasharray: 20; //表示虚线描边 该属性把线段变成虚线 数值越大 虚线里每个线段的长度越长

stroke-dashoffset: 1000;//虚线的偏移量

}

1.当虚线的小线条足够长，超过图形的整个线条长度时，图像没有什么变化

整个图像看起来完全不是虚线。只需要将stroke-dasharray属性设置的足够长，超过整个线条的长度。

2. 给线条设置偏移量，让它不再覆盖整个图形。

这样你就看不见图形了。

3. 动态地慢慢将线条的偏移量设置回归到0

.path1 {

stroke-dasharray: 1000;

stroke-dashoffset: 1000;

animation: dash 5s linear forwards;

}

@keyframes dash {

to {

stroke-dashoffset: 0;

}

}

通过以上代码可以完成图片动画出现

设置css时可能不知道图形的长度，这个时候通过以下js就可以获取path的长度了

var path = document.querySelector('.path');

var length = path.getTotalLength();

HTML5 SVG实现过山车动画

HTML5 SVG实现过山车动画是一款jQuery特效很酷的HTML5 SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,效果非常酷. http://www.hui ...

HTML5的 2D SVG和SVG DOM的学习笔记(2)---SVG动画

SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效

这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切 ...

7种炫酷HTML5 SVG液态水滴融合分解动画特效

这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合分解动画特效.这些SVG动画特效使一些HTML元素.如菜单.分页button.APP.选择框等元素的过渡动画像几粒水滴一样融合分解.效果很的酷 ...

推荐8个实现 SVG 动画的 JavaScript 库

SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何质量损失.除此之外,你可以让 SVG 灵活现一些动画效果.这篇文章就给大家推荐8个实现 SVG 动画的 JavaSc ...

使用 SVG 动画实现弹性的页面元素效果

Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...

Walkway.js – 用线条制作简约的 SVG 动画

Walkway.js 是一个使用线条和路径元素组成 SVG 动画图像的简单方法.只需根据提供的配置对象创建一个新的 Walkway 实例就可以了.这种效果特别适合那些崇尚简约设计风格的网页.目前, W ...

带给你灵感：30个超棒的 SVG 动画展示【上篇】

前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助SVG,我们有更多 ...

随机推荐

基于Caffe的Large Margin Softmax Loss的实现(中)

小喵的唠叨话:前一篇博客,我们做完了L-Softmax的准备工作.而这一章,我们开始进行前馈的研究. 小喵博客: http://miaoerduo.com 博客原文:  http://www.miao ...

post上传文件

- (BOOL)sendPhotoToTumblr:(NSString *)photo withCaption:(NSString *)caption; {         //get image d ...

C2第九次解题报告

看过题解后如果觉得还算有用,请帮忙加点我所在团队博客访问量 http://www.cnblogs.com/newbe/ http://www.cnblogs.com/newbe/p/4069834.h ...

分布式拒绝服务攻击 DDoS

分布式拒绝服务(DDoS:Distributed Denial of Service)攻击指借助于客户/服务器技术,将多个计算机联合起来作为攻击平台,对一个或多个目标发动DDoS攻击,从而成倍地提高拒 ...

LARS 最小角回归算法简介

最近开始看Elements of Statistical Learning, 今天的内容是线性模型(第三章..这本书东西非常多,不知道何年何月才能读完了),主要是在看变量选择.感觉变量选择这一块领域非 ...

【Scikit】实现Multi-label text classification代码模板

Refer to: https://stackoverflow.com/a/10527953 code: # -*- coding: utf-8 -*- import numpy as np from ...

**CI中自动类加载的用法总结

总结: 哪一个类中用到某一个类,就在构造函数中加载这个类,比如m_attach,C_Feed类中有用到,那么就在构造函数中加载 控制器: class C_Feed extends CI_Control ...

zookeeper是如何选取主leader的？

以一个简单的例子来说明整个选举的过程.假设有五台服务器组成的zookeeper集群,它们的id从1-5,同时它们都是最新启动的,也就是没有历史数据,在存放数据量这一点上,都是一样的.假设这些服务器依序 ...

K2 Blackpearl中从数据库直接删除流程实例之K2Server表

转:http://www.cnblogs.com/dannyli/archive/2012/11/29/2794772.html /********************************** ...