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 学习<四 ...

随机推荐

Shell脚本中的while getopts用法小结
getpots是Shell命令行参数解析工具,旨在从Shell Script的命令行当中解析参数.getopts被Shell程序用来分析位置参数,option包含需要被识别的选项字符,如果这里的字符后 ...
【nginx启动报错】重启服务器之后nginx启动错
错误信息: # ./nginx nginx: [emerg] open() "/var/run/nginx/nginx.pid" failed (2: No such file ...
attention 汇总（持续）
Seq2seq Attention Normal Attention 1. 在decoder端,encoder state要进行一个线性变换,得到r1,可以用全连接,可以用conv,取决于自己,这里 ...
win10启动telnet
1.点击win菜单,点击设置图标 2.选择系统选项 3.选择应用与程序选项 4.拉到最下方,选择程序与功能 5.选择启用或关闭windows功能 6.下拉找到telnet客户端选项勾选
[反汇编] 获取上一个栈帧的ebp
使用代码 lea ecx, [ebp+4+参数长度] 就可以实现. 如下图,理解栈帧的结构,很好理解. 虽然也是 push param的,但这部分在恢复时被调用函数会恢复的,因此这并不算esp的值. ...
C# shell32.dll 的用法
1 首先要使用shell32 请在项目引用中添加shell32.dll 的引用 (备注:该引用是系统dll文件在C:\Windows\System32 目录下可以自行拷贝到项目中) priv ...
Shell（三）：echo、printf、test命令
一.echo 1.显示普通字符串: echo "today is a wonderful day" 这里的双引号可以省略. 2.显示转义字符: echo "\" ...
javascript常用数据验证函数
正则表达式日期验证函数 function CheckDate(str){ //在JavaScript中,正则表达式只能使用"/"开头和结束,不能使用双引号 ...
UITableViewStyleGrouped 类型 tableView sectionHeader 高度问题
UITableViewStyleGrouped 类型的 tableView 在适配的时候出现很大的问题.记录一下按照之前的方法,只需要执行以下的代码就能够很好的解决 section == 0 的时候 ...
ucoreOS_lab7 实验报告
所有的实验报告将会在 Github 同步更新,更多内容请移步至Github:https://github.com/AngelKitty/review_the_national_post-graduat ...

svg描边路径动画

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

随机推荐

热门专题