svg path 动画效果
http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear infinite;
} @keyframes dash {
to {
stroke-dashoffset: 0;
}
} </style>
</head> <body> <svg width="100%" height="320" xmlns="http://www.w3.org/2000/svg">
<!--<path d="M150 0 L75 200 L225 200 Z" stroke="black" fill="transparent"/>-->
<path d="M30 30 L25 30 L20 80 L10 90 L20 100 L20 180 L30 180 " stroke="red" fill="none" stroke-width="3"/>
<!--<path d="M30 20 C 30 20, 10 30, 20 30" stroke="black" fill="transparent"/>-->
<!--<text x="0" y="100" style="fill:red;">
节点1
</text>
--> </svg> <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<title>马儿跑</title>
<g>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<set attributeName="x" attributeType="XML" to="60" begin="3s" />
</text>
</g>
</svg>
<br/>
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animate attributeName="x" from="0" to="160" begin="0s" dur="3s" repeatCount="indefinite" />
</text>
</g>
</svg>
<br/>
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>
<animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="0.1" to="1" repeatCount="1" />
</g>
</svg>
<br/>
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
<animateMotion path="M10,80 L100,120,Z" begin="0s" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" from="1" to="0" begin="0s" dur="2s" repeatCount="indefinite" />
<animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" />
</text>
<path d="M10,80 L100,120,Z" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>
<br/> <svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
<title>马儿跑</title>
<text font-family="microsoft yahei" font-size="40" y="60" x="100">马
<animateTransform attributeName="transform" type="scale" from="1" to="2" dur="10s" repeatCount="indefinite" additive="sum"/>
<animateTransform attributeName="transform" type="rotate" from="0 100 60" to="360 100 60" dur="10s" fill="freeze" repeatCount="indefinite" additive="sum"/>
</text>
</svg>
</body> </html>
svg path 动画效果的更多相关文章
- SVG路径动画解密
原文:SVG路径动画解密 原文链接:http://www.gbtags.com/gb/share/5581.htm SVG路径动画效果现在貌似越来越多网站都使用了,给我的感觉就像是一段时间的流行而已, ...
- 如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验
任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战.设备间不同的屏幕尺寸.分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著! SVG(可 ...
- CAShapeLayer的path动画
CAShapeLayer的path动画 效果 源码 https://github.com/YouXianMing/Animations // // CAShapeLayerPathController ...
- 如何使用SVG生成超酷的页面预加载素描动画效果
在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 2 SVG的特点 与其他图像 ...
- 使用 SVG 来实现波浪 (wave) 动画效果
如下图所示的波浪动画效果,实现方法有很多,比如CSS或者是js等方法都可以实现.不过,要是使用SVG来实现的,我觉得比其它两种方法都要简单.这篇文章就来讲讲使用SVG来实现类似这样的波浪动画效果是多么 ...
- 纯CSS实现帅气的SVG路径描边动画效果(转载)
本文转载自: 纯CSS实现帅气的SVG路径描边动画效果
- SVG的路径动画效果
使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...
- Android实现炫酷SVG动画效果
svg是眼下十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们能够直接用代码来描画图像,能够用不论什么文字处理工具打开svg图像.通过改变部分代码来使图像具有 ...
- 【Web动画】SVG 线条动画入门
通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...
随机推荐
- 《javascript设计模式》笔记之第五章：单体模式
一:单体的基本结构: 最简单的单体,实际就是一个对象字面量: var Singleton = { attribute1: true, attribute2, method1: function() { ...
- CodeSmith Generator 7.0.2
[工具]CodeSmith Generator 7.0.2激活步骤 只看楼主 收藏 回复 M炎骫毒逆天T c#攻城狮 8 学过三层的人应该认识CodeSmith Generator吧, ...
- 【转】常用邮箱的 IMAP/POP3/SMTP 设置
POP3 POP3是Post Office Protocol 3的简称,即邮局协议的第3个版本,它规定怎样将个人计算机连接到Internet的邮件服务器和下载电子邮件的电子协议.它是因特网电子邮件的第 ...
- Android LitePal介绍与使用说明
LitePal for Android LitePal是一个Android开源库,它使开发者使用SQLite数据库变得非常容易. 你可以不用写一句SQL语句就可以完成大部分数据库操作,包括创建表,更新 ...
- ssh框架出现Java.lang.NoSuchMethodError: antlr.collections.AST.getLine()I错误
原因:因为Struts自带的antlr-2.7.2.jar,比Hibernate自带的antlr-2.7.7.jar的版本要低,存在jar包冲突现象,因此要删除前一个低版本的. 由于myeclipse ...
- (转)UVM挑战及概述
UVM的调度也具有其独特的挑战,尤其是在调试的领域.其中的一些挑战如下: 1. Phase的管理:objections and synchronization 2. 线程调试 3. Tracing i ...
- Redis学习笔记（一）五种数据类型
1.字符串(String) 基本操作:SET(设置).GET(获取).DEL(删除)其他操作传送门 root@localhost:~# redis-cli > set msg hello OK ...
- 异步 BeginInvoke
委托的异步调用异步多线程的三大特点:1.同步方法卡界面,原因是主线程被占用:异步方法不卡界面,原因是计算交给了别的线程,主线程空闲2.同步方法慢,原因是只有一个线程计算:异步方法快,原因是多个线程同事 ...
- 安装 Azure CLI
首先安装node 和 npm 的安装 官方推荐v4.4.4长期支持版 1.下载并解压 node-v4.4.4-linux-x64.tar.xz tar -xJf node-v4.4.4-linux-x ...
- debug1: expecting SSH2_MSG_KEX_ECDH_REPLY解决
设置mtu ifconfig en1 mtu 1200 代理工具 退出lantern,退出shadowsocks