1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame
4、canvas（当然，这个还是要配合js）
也许这么分类是不对的，因为无论如何都需要脚本控制，那么也许应该分为
1、js+传统css
4、js+canvas
但由于requestAnimationFrame比较特殊，所以还是单独出来说吧。
1、setTimeout和requestAnimationFrame
setTimeout就比较基本了，没什么说的，然后requestAnimationFrame可以看看这个文章：
requestAnimationFrame的好处是
类似flash的enterFrame事件，跟浏览器重绘同步，不像setTimeout那样强行插入，更容易实现平滑的效果
灵活，可以实现很多css3无法实现的高级效果，例如一些曲线缓动、弹性效果等
容易做到浏览器兼容，可以封装函数，低级浏览器改为使用setTimeout
缺点是，很多浏览器不支持，尤其android，只能使用setTimeout弥补。
简单兼容：
window.requestAnimFrame = (function(){
window.requestAnimationFrame
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame
function( callback ){
window.setTimeout(callback, 1000 / 60);
CSS3可以利用css语法把动画绑定到dom上，不需要js代码参与。CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。
Transform：&
Transition：&
Animation：&
好处是：方便，不需要js参与，适合做一些图片/文字的简单效果
坏处是：不灵活，效果有限
网上一些所谓&惊讶&的CSS3效果，很多都是配合js实现的，可以说，js+css应该是灵活运用，包括css2和css3的内容。
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
官方资料：&
由于svg每个图形都是一个对象，那么处理鼠标事件就跟普通的html相差无几了，这个在开发效率上是比较高的。
例如这样的地图应用：
SVG特点是：
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
SVG工具比较成熟，美术同学的可以直出静态，而也可以通过也可以把矢量动画导出为动画。
依赖js（参考1），修改canvas的效果，简单的效果可以直接利用canvas.getContext("2d")画出来；复杂的效果，可以配合Image实现。
简单例子：&
非常好的学习资料：&
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
Flash CC在支持Canvas方面也是很强大，已经集成到IDE中，可以直接新建HTML 5 canvas动画文档，也可以从原有的Flash动画导出canvas动画。
PC浏览器实在多，直接看终端的浏览器吧，&
可以发现，CSS3和canvas是清一色都被支持到了，而SVG在Android低版本（2.X）浏览器是不支持的。
另外，在android上requestAnimationFrame也是不支持的（4.2前）。
如果做游戏，肯定是清一色canvas+开源的框架，但是普通的简单网页效果，例如图表，就应该根据实际的情况灵活运用各种方式了。而SVG相对而言，可能是较方便实现图表的方式。
阅读(...) 评论()CSS3 SVG文字背景动画 超酷的文字特效 | HTML5资源教程| 今天我们来探索一下上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生――网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意，这个技术还是实验性的。首先，让我们来看看基本的概念，然后我们会朝着这个方向努力。请注意，我们将在SVG上使用CSS过渡，可能无法得到所有浏览器的支持。乍眼一看可能不明白这个效果是怎么完成的。我们先仔细看看上面的边就会发现，白色的边的宽度不断从右边往左边延伸，而一条稍微延时的边紧跟着一起移动。每条边都有这样的做法。看起来就像上面的边经过拐角移动到了左边，并以此类推。不用SVG也能完成这样的效果，甚至只用伪元素。但是我们想探索一下怎样用CSS而不是JavaScript来控制SVG。现在，来思考一下要怎么创建出这样的效果。我们可以改变矩形的troke-dashoffset或者直接画线。我们尝试不用JavaScript的解决方案。我们发现，CSS过渡stroke-dashoffset 和 stroke-dasharray的值会触发很多BUG。所以我们要尝试不同的解决方案，利用线条和它们的动画，这在CSS里很容易理解和实现。这也给我们更多机会去探索不同的动画效果。我们将要使用的线的特别之处是，它们在这个动画里将有三种状态。它们是方盒边长的三倍，其中中间一截是与边等长的间隙。我们将通过设置stroke-dashoffset的值来实现与方盒的边等长。现在，这个动画实现的关键在于线的位置转换：SVG与方盒大小一致，就不会看到超出虚线的部分。我们先完成第一条线：&div&
&&&&&svg&width=&200&&height=&200&&
&&&&&&&&&line&x1=&0&&y1=&0&&x2=&600&&y2=&0&&/&
&&&&&/svg&
&/div&这个div长宽20px，和SVG一样。把SVG位置设为absolute，线宽度为10，stroke-dasharray为200。div&{
&&&&width:&200
&&&&height:&200
&&&&position:&
&&&&overflow:&
&&&&background:&#
&&&&position:&
&&&&top:&0;
&&&&left:&0;
svg&line&{
&&&&stroke-width:&10;
&&&&stroke:�
&&&&fill:&
&&&&stroke-dasharray:&200;
&&&&-webkit-transition:&-webkit-transform&.6s&ease-
&&&&transition:&transform&.6s&ease-
div:hover&svg&line&{
&&&&-webkit-transform:&translateX(-400px);
&&&&transform:&translateX(-400px);
}当数鼠标悬浮在div上时，线也有一个过渡。我们要把线移动到它的三分之二处，所以要在x轴上移动到-400px处，你可以。因为不能在这里用百分比做单位，所以用px。接着添加其余三条线，gif效果：我们需要实现以下效果：线的第一部分移出方盒后，旁边的线的最后一部分移动进来，，这将传进直线在转角处转弯的假象，来看看坐标系的定义：左边的线的坐标是(0,200) 到 (0,-400)，底部的是(200,200) 到 (-400,200)，右边的是right one (200,0) 到 (200,600)：&div&
&&&&&svg&width=&200&&height=&200&&
&&&&&&&&&line&class=&top&&x1=&0&&y1=&0&&x2=&600&&y2=&0&/&
&&&&&&&&&line&class=&left&&x1=&0&&y1=&200&&x2=&0&&y2=&-400&/&
&&&&&&&&&line&class=&bottom&&x1=&200&&y1=&200&&x2=&-400&&y2=&200&/&
&&&&&&&&&line&class=&right&&x1=&200&&y1=&0&&x2=&200&&y2=&600&/&
&&&&&/svg&
&/div&给每条线加上不同的hover效果：div:hover&svg&line.top&{
&&-webkit-transform:&translateX(-400px);
&&transform:&translateX(-400px);
div:hover&svg&line.bottom&{
&&-webkit-transform:&translateX(400px);
&&transform:&translateX(400px);
div:hover&svg&line.left&{
&&-webkit-transform:&translateY(400px);
&&transform:&translateY(400px);
div:hover&svg&line.right&{
&&-webkit-transform:&translateY(-400px);
&&transform:&translateY(-400px);
}。现在方盒大小改为300 x 460，再给它添加一些内容：&div&class=&box&&
&&&&&svg&xmlns=&http://www.w3.org/2000/svg&&width=&100%&&height=&100%&&
&&&&&&&&&line&class=&top&&x1=&0&&y1=&0&&x2=&900&&y2=&0&/&
&&&&&&&&&line&class=&left&&x1=&0&&y1=&460&&x2=&0&&y2=&-920&/&
&&&&&&&&&line&class=&bottom&&x1=&300&&y1=&460&&x2=&-600&&y2=&460&/&
&&&&&&&&&line&class=&right&&x1=&300&&y1=&0&&x2=&300&&y2=&1380&/&
&&&&&/svg&
&&&&&h3&D&/h3&
&&&&&span&2012&/span&
&&&&&span&Broccoli,&Asparagus,&Curry&/span&
&/div&为了实现Carl Philipe Brenner的网站上的效果，我们还要添加颜色过渡效果、盒子阴影等：.box&{
&&&&width:&300
&&&&height:&460
&&&&position:&
&&&&background:&rgba(255,255,255,1);
&&&&display:&inline-
&&&&margin:&0&10
&&&&cursor:&
&&&&color:&#2c3e50;
&&&&box-shadow:&inset&0&0&0&3px&#2c3e50;
&&&&-webkit-transition:&background&0.4s&0.5s;
&&&&transition:&background&0.4s&0.5s;
.box:hover&{
&&&&background:&rgba(255,255,255,0);
&&&&-webkit-transition-delay:&0s;
&&&&transition-delay:&0s;
}给文字加上样式：.box&h3&{
&&&&font-family:&&Ruthie&,&
&&&&font-size:&180
&&&&line-height:&370
&&&&margin:&0;
&&&&font-weight:&400;
&&&&width:&100%;
.box&span&{
&&&&display:&
&&&&font-weight:&400;
&&&&text-transform:&
&&&&letter-spacing:&1
&&&&font-size:&13
&&&&padding:&5
.box&span&{
&&&&-webkit-transition:&color&0.4s&0.5s;
&&&&transition:&color&0.4s&0.5s;
.box:hover&h3,
.box:hover&span&{
&&&&color:&#
&&&&-webkit-transition-delay:&0s;
&&&&transition-delay:&0s;
}给SVG和线条添加样式：.box&svg&{
&&&&position:&
&&&&top:&0;
&&&&left:&0;
.box&svg&line&{
&&&&stroke-width:&3;
&&&&stroke:&#ecf0f1;
&&&&fill:&
&&&&-webkit-transition:&all&.8s&ease-in-
&&&&transition:&all&.8s&ease-in-
}给线的过渡加上延时：.box:hover&svg&line&{
&&&&-webkit-transition-delay:&0.1s;
&&&&transition-delay:&0.1s;
}之前我们定义的stroke-dasharray只有一个值，但是现在要因尺寸变化而修改.box&svg&line.top,
.box&svg&line.bottom&{
&&&&stroke-dasharray:&330&240;&
.box&svg&line.left,
.box&svg&line.right&{
&&&&stroke-dasharray:&490&400;
}如果你尝试这些值，你就能看到这些线条不同的显示效果。最后，我们要个hover过渡设置相应的值。因为现在元素是300px宽，所以水平线条改为900px，竖线同理改变:.box:hover&svg&line.top&{
&&&&-webkit-transform:&translateX(-600px);
&&&&transform:&translateX(-600px);
.box:hover&svg&line.bottom&{
&&&&-webkit-transform:&translateX(600px);
&&&&transform:&translateX(600px);
.box:hover&svg&line.left&{
&&&&-webkit-transform:&translateY(920px);
&&&&transform:&translateY(920px);
.box:hover&svg&line.right&{
&&&&-webkit-transform:&translateY(-920px);
&&&&transform:&translateY(-920px);
}大功告成。希望能通过这些效果激发你的创意，实现更多的效果~ | 英文原文：由整理编译
上一篇： 原文 //fragment-note/ 前言 一直在用Fragment，但是没有系统的整理过，Google了一下相关文章，看到了几篇，将几篇还不错的文章重点整理了下，很多是直接Copy的，只为做个笔记，以后翻来看比较方便，建议大家看一下
下一篇：没有了分类排行榜
作者：木木博客
作者：木木
作者：何杨
作者：何杨
作者：苗元威
安全、高效、便捷的交易中介平台
中小企业首选SEO、全网营销服务
技术外包平台 一站式网站技术服务
高收益、移动广告、弹窗CPM
做有良心的cms技术服务提供商
提供公众号出售、求购、代售等交易中介以及增值服务。
增值电信业务经营许可证：苏B2-
编辑热线：6-808
A5创业网 版权所有.
扫一扫关注最新创业资讯怎么制作HTML5 SVG描边文字 - HTML5当前位置:& &&&怎么制作HTML5 SVG描边文字怎么制作HTML5 SVG描边文字&&网友分享于：&&浏览：0次如何制作HTML5 SVG描边文字
在很多时候，SVG是最容易在网页上做出文字特效的方法。现在SVG已经被所有的现代浏览器支持，包括IE9。要在页面上制作SVG文字，可以直接将SVG代码插入带页面中，SVG文字代码十分简单易懂。如下是一段SVG描边
文字的代码：
&svg version="1.1" xmlns="http://www.w3.org/2000/svg"&
&text fill="#e96" style="font-size:60 font-family: Futura Condensed ExtraBold, Arial Black, sans- color:" stroke = "black" stroke-width = "2px"&STROKED SVG TEXT&/text&
效果如下：
正如你所见，在HTML中制作SVG描边文字是一件非常容易的事情。SVG文字和和普通文本的主要区别是它不能使用color属性（SVG文字可以通过fill属性来改变文字颜色。另外提一点， y 属性用于设置文字的基线）。
SVG制作文字描边效果也比使用CSS来实现要简单得多。
既然SVG文字如此好用，为什么不在网页中广泛使用它们呢？有以下几个原因：
浏览器对SVG的支持：虽然现代所有的现代浏览器，如Firefox、Chrome 和 Safari，以及IE9等都支持SVG，但是IE8级以下的浏览器不支持SVG，想要在它们中使用SVG需要使用javascript来实现。
SVG1.1没有文本换行功能，使它不适合在文章正文中使用。
拷贝SVG文本在不同的浏览器上仍存在问题：你会发现你可以在最新版本的Chrome 和 Safari浏览器上复制和粘贴SVG文本，但是在Firefox浏览器上却不行。
通过本文的学习，你可以将SVG作为普通文字来使用（在ISO4中，网页的文字使用的就是SVG格式），至于将SVG作为标题和一些文字特效的内容，我们将在后续文章中讲解。
转自：/ziliaoku/qianduanjiaocheng/.html
更多参考：
SVG 系列教程列表
SVG动画入门
SVG动画入门（二）
SVG技术入门：线条动画实现原理
如何使用CSS来修改SVG原点和制作SVG动画
纯CSS实现帅气的SVG路径描边动画效果
SVG矢量绘图 path路径详解（基本画法）
SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）
Web流程图绘制使用raphael
HTML5对比HTML4带来的新变化
本文转自：如何制作HTML5 SVG描边文字
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有