svg描边路径动画

svg描边路径动画
<pre>
<!DOCTYPE html>
<html>

html,body{
width:100%; height:100%;
}
/*1000是线条(path)的长度 stroke-dasharray和stroke-dashoffset的值要一样 stroke-dasharray的值就是每段的长度 stroke-dashoffset每段的偏移值 */
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 1s linear infinite;
}

@-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.svgdonghua2{
display: none;
}
</style>
</head>
<body>

</body>
</html>

ps:svg设置宽度并不能修改里面的宽度 viewBox 167 167是svg原本的宽度和高度单位是像素不能去改他改width和height只能等比例缩放不能拉伸

更多svg自适应的理解查看 http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

svg描边路径动画的更多相关文章

SVG的路径动画效果
使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...
SVG描边动画实现过程
准备工具:Adobe AI+PS 1.确定SVG画布的大小,在PS中切出需要描边效果的区域,以此区域的大小做为SVG容器的大小. 2.将PS中切好的图片直接拖拽到AI中 3.使用AI中的钢 ...
SVG路径动画解密
原文:SVG路径动画解密原文链接:http://www.gbtags.com/gb/share/5581.htm SVG路径动画效果现在貌似越来越多网站都使用了,给我的感觉就像是一段时间的流行而已, ...
DrawSVG - SVG 路径动画 jQuery 插件
jQuery DrawSVG 使用了 jQuery 内置的动画引擎实现 SVG 路径动画,用到了 stroke-dasharray 和 stroke-dashoffset 属性.DrawSVG 是完全 ...
SVG描边动画原理
SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...
css3 svg 物体跟随路径动画教程
css3 svg 物体跟随路径动画教程https://www.jianshu.com/p/992488f3f3fc
超级强大的SVG SMIL animation动画详解
本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...
SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

随机推荐

selectpage选择订单的时候,订单数量和金额会动态改变
1. 2. HTML部分: JS: PHP获取数据并return json
PHPStorm设置等号对齐
为了代码的美观,我们常常会把代码等号设置对齐,手动对齐的效率很低,PHPStrom提供了快捷键来一键对齐. 首先设置PHPStorm 设置完PHPStorm后,使用快捷键Command+Option+ ...
重磅来袭！Reactive 架构专场四城巡回演讲
Reactive 究竟是什么?Reactive 对架构设计的影响和冲击,以及给开发方式带来的改变有哪些?为什么阿里巴巴.Pivotal.Facebook 纷纷在生产环境中实践 Reactive? 本次 ...
oracle学习笔记（二十一）程序包
程序包之前我们调用的dbms_output.put_line(''),dbms_output就是一个程序包程序包创建语法 1. 声明程序包 --声明程序包中的过程,函数,自定义的类型 --程序包里 ...
c#中xml增删查改
/// <summary> /// xml转list /// </summary> /// <typeparam name="T">目标对象&l ...
用python执行Linux命令
例1:在python中包装ls命令 #!/usr/bin/env python #python wapper for the ls command import subprocess subproce ...
Chrome浏览器Json查看插件JsonHandle下载以及无法安装插件的解决方法
场景在使用Chrome浏览器查看Json数据时如果没有插件会挤作一团. 安装JsonHandle插件后博客: https://blog.csdn.net/badao_liumang_qizhi 关 ...
JVM 参数配置
JAVA_OPTS="-server -Xms2048m -Xmx2048m -Xmn512m -Xss256k -XX:PermSize=256m -XX:MaxPermSize=256m ...
SQL Server中的LEFT、RIGHT函数
SQL Server中的LEFT.RIGHT函数. LEFT:返回字符串中从左边开始指定个数字符. LEFT(character_expression,integer_expression); RIG ...
安全意识第三期丨关于高速ETC办理的这些新骗局，速看！
近期,最火爆的莫过于ETC了. 不仅各大银行,甚至微信和支付宝都推出了办理服务. 虽说更加便捷了,却也带来了安全隐患. 下面这个案例,大家一定要注意,已经有很多车主“中招”,落入了骗子的圈套. 注意: ...

svg描边路径动画

svg描边路径动画的更多相关文章

随机推荐

热门专题