我们经常可以在一些页面看到看起来很酷的线条动画，有些可以用css实现，有些css就无能为力了，今天来研究另一种实现方式，svg

　　如果对svg是什么还不了解的话，可以先去看看svg的基础教程；

　　一般对于复杂的线条，不提倡自己去手动画，而应该借助illustrator之类的绘图软件生成后保存位svg文件

　　 svg做线条动画的主要方式使用stroke-dasharray,stroke-dashoffset来实现；　

  1. stroke-dasharray：它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2；
  2. stroke-dashoffset：标识的是整个路径的偏移值；
  3. 具体大家可以拖动下面input感受下，动画效果我们可以通过js，css3 animation 及svg本身来实现，自己大胆摸索吧；
 

 

虚线长度   虚线间隔   整体偏移

自己新开发了一个小程序，求关注，求分享

炫酷线条动画--svg的更多相关文章

  1. 一款炫酷Loading动画--载入失败

    简单介绍 上一篇文章一款炫酷Loading动画–载入成功.给大家介绍了成功动画的绘制过程,这篇文章将接着介绍载入失败特效的制作. 相比成功动画,有了前面的经验,失败动画的过程就显得比較简单了. 动画结 ...

  2. uwp - 做一个相对炫酷的动画按钮/按钮动画

    原文:uwp - 做一个相对炫酷的动画按钮/按钮动画 看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验.效果图: 动画分为几个部分,分别是:内圆从中心 ...

  3. 28种CSS3炫酷载入动画特效

    这是一组效果很炫酷的纯CSS3 Loading载入动画特效.这组loading动画共同拥有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完毕的,每个载入动画都构 ...

  4. 一款炫酷Loading动画--载入成功

    简单介绍 昨天在简书上看到一篇文章.介绍了一个载入动画的实现过程 一款Loading动画的实现思路(一) 仅仅可惜原动画是IOS上制作的.而看了一下.作者的实现思路比較复杂,于是趁着空暇写了一个And ...

  5. Android ViewPager+属性动画 实现炫酷视差动画效果

    ViewPager有一个setPageTransform()方法可以实现很多酷炫的动画效果 先来个仿QQ的侧滑面板效果 vp.setPageTransformer(true, new PageTran ...

  6. 12种炫酷HTML5 SVG和CSS3表单浮动标签特效

    这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...

  7. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  8. 8个超炫酷仿HTML5动画源码

    1.jQuery万年历插件 带农历老皇历功能 这是一款基于jQuery的日历插件,这款日历插件和之前分享的日历控件有很大差异,它是一本万年历,包含了农历已经老皇历的功能,是一个挑好日子的工具.同时日历 ...

  9. 10个非常炫酷的jQuery相册动画赏析

    我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...

随机推荐

  1. Linux第四节 组管理、用户管理、权限管理 / chmod /chown / umask / vim

    三期第三讲1.组管理/用户管理(重要文件系统会实时备份 file-) vim/etc/group: 组管理文件://组名:密码控位键:组id:成员 vim/etc/gshadow:组密码管理文件:// ...

  2. 设计模式之 - 策略模式（Strategy Pattern）

    引入:项目中涉及到工作流,当然这个工作流的实现是由用户根据不同的策略或者说方式传入处理这个事件的人的审批链,后台在存储过程中进行解析,然后生成最终的审批链,在系统中流转进行审批. 比如审批链: 张三 ...

  3. 用Go校验下载文件之SHA256

    用GO校验下载文件之SHA256 原来对计算机和网络使用安全这块不够重视,用了N多年盗版的操作系统和办公软件,为了破解使用过各种激活软件,也安装使用过很多别人破解过的软件:网络下载的文件从不校验.慢慢 ...

  4. c#程序连接mysql，报"Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) for operation '='"的解决方案

    =============================================== 20170607_第一次修改                       ccb_warlock === ...

  5. scrapy使用PhantomJS爬取数据

    环境:python2.7+scrapy+selenium+PhantomJS 内容:测试scrapy+PhantomJS 爬去内容:涉及到js加载更多的页面 原理:配置文件打开中间件+修改proces ...

  6. rabbitmq：centos7安装与python调用

    1.centos安装rabbitmq 官网下载或者yum list |grep rabbitmq搜索安装,官网是最新的版本 wget http://www.rabbitmq.com/releases/ ...

  7. VS Code 快捷键（中英文对照版）

    原文地址:https://segmentfault.com/a/1190000007688656 常用 General 按 Press 功能 Function Ctrl + Shift + P,F1 ...

  8. Python学习九：列表生成式

    列表生成式,是Python内置的一种极其强大的生成list的表达式. 如果要生成一个list [1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9] 可以用 range(1 , 10) ...

  9. ArrayList排序算法的源码

    ArrayList,排序方法的调用过程 // 排序方法 public void sort(Comparator<? super E> c) { final int expectedModC ...

  10. clear命令新认识

    学习Linux的时候,最先学习的几个命令中有一个就是clear,中文翻译为:清屏. 以前的理解都是按照字面进行解读的,清除屏幕上多余的内容. 但是实际上真的如此么? 原来屏幕是: 运行clear命令: ...