代码如下:<html> <head> <meta charset=”UTF-8″ /> <title>Animation in HTML5 using the canvas element</title> </head> <body onload=”init();”> <canvas id=”canvas” width=”1000″ height=”600″>Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas> <div id=”controls”> <button type=”button” onclick=”speed(-0.1);”>Slower</button> <button type=”button” onclick=”play(this);”>Play</button> <button type=”button” onclick=”speed(+0.1)”>Faster</button> </div> </body> </html>js代码： 定义一些变量：
代码如下:
var dx=5, //当前速率 rate=1, //当前播放速度 ani, //当前动画循环 c, //画图(Canvas Context) w, //汽车[隐藏的](Canvas Context) grassHeight=130, //背景高度 carAlpha=0, //轮胎的旋转角度 carX=-400, //x轴方向上汽车的位置(将被改变) carY=300, //y轴方向上汽车的位置(将保持为常量) carWidth=400, //汽车的宽度 carHeight=130, //汽车的高度 tiresDelta=15, //从一个轮胎到最接近的汽车底盘的距离 axisDelta=20, //汽车底部底盘的轴与轮胎的距离 radius=60; //轮胎的半径
为了实例化汽车canvas(初始时被隐藏)，大家使用下面的自执行的匿名函数
代码如下:(function(){ var car=document.createElement(‘canvas’); //创建元素 car.height=carHeight+axisDelta+radius; //设置高度 car.width=carWidth; //设置宽度 w=car.getContext(‘2d’); })();点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：
代码如下:function play(s){ //参数s是一个button if(ani){ //如果ani不为null，则代表大家当前已经有了一个动画 clearInterval(ani); //所以大家需要清除它(停止动画) ani=null; s.innerHTML=’Play’; //重命名该按钮为“播放” }else{ ani=setInterval(drawCanvas,40); //大家将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一 s.innerHTML=’Pause’; //重命名该按钮为“暂停” } }加速，减速，通过以下方法，改变移动距离的大小来实现：
代码如下:function speed(delta){ var newRate=Math.max(rate+delta,0.1); dx=newRate/rate*dx; rate=newRate; } 页面加载的初始化方法： //init function init(){ c=document.getElementById(‘canvas’).getContext(‘2d’); drawCanvas(); }主调方法：
代码如下:function drawCanvas(){ c.clearRect(0,0,c.canvas.width, c.canvas.height); //清除Canvas(已显示的)，避免产生错误 c.save(); //保存当前坐标值以及状态，对应的类似“push”操作 drawGrass(); //画背景 c.translate(carX,0); //移动起点坐标 drawCar(); //画汽车(隐藏的canvas) c.drawImage(w.canvas,0,carY); //画最终显示的汽车 c.restore(); //恢复Canvas的状态，对应的是类似“pop”操作 carX+=dx; //重置汽车在X轴方向的位置，以模拟向前走 carAlpha+=dx/radius; //按比例增加轮胎角度 if(carX>c.canvas.width){ //设置某些定期的边界条件 carX=-carWidth-10; //也可以将速度反向为dx*=-1; } }画背景：
代码如下:function drawGrass(){ //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标 var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height); //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色 grad.addColorStop(0,’#33CC00′); grad.addColorStop(1,’#66FF22′); c.fillStyle=grad; c.lineWidth=0; c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight); }画车身：
代码如下:function drawCar(){ w.clearRect(0,0,w.canvas.width,w.canvas.height); //清空隐藏的画板 w.strokeStyle=’#FF6600′; //设置边框色 w.lineWidth=2; //设置边框的宽度，单位为像素 w.fillStyle=’#FF9900′; //设置填充色 w.beginPath(); //开始绘制新路径 w.rect(0,0,carWidth,carHeight); //绘制一个矩形 w.stroke(); //画边框 w.fill(); //填充背景 w.closePath(); //关闭绘制的新路径 drawTire(tiresDelta+radius,carHeight+axisDelta); //大家开始画第一个轮子 drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta); //同样的，第二个 }画轮胎：
代码如下:function drawTire(x,y){ w.save(); w.translate(x,y); w.rotate(carAlpha); w.strokeStyle=’#3300FF’; w.lineWidth=1; w.fillStyle=’#0099FF’; w.beginPath(); w.arc(0,0,radius,0,2*Math.PI,false); w.fill(); w.closePath(); w.beginPath(); w.moveTo(radius,0); w.lineTo(-radius,0); w.stroke(); w.closePath(); w.beginPath(); w.moveTo(0,radius); w.lineTo(0,-radius); w.stroke(); w.closePath(); w.restore(); }由于原理简单，并且代码中作了详细注释，这里就不一一讲解！ 2.CSS3 你将看到大家未通过一句JS代码就完全实现了和上面一样的动画效果： HTML代码：
代码如下:<html> <head> <meta charset=”UTF-8″ /> <title>Animations in HTML5 using CSS3 animations</title> </head> <body> <div id=”container”> <div id=”car”> <div id=”chassis”></div> <div id=”backtire” class=”tire”> <div class=”hr”></div> <div class=”vr”></div> </div> <div id=”fronttire” class=”tire”> <div class=”hr”></div> <div class=”vr”></div> </div> </div> <div id=”grass”></div> </div> <footer></footer> </body> </html> CSS代码： body { padding:0; margin:0; }定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）
代码如下:/*定义动画：从-400px的位置移动到1600px的位置 */ @keyframes carAnimation { 0% { left:-400px; } /* 指定初始位置，0%等同于from*/ 100% { left:1600px; } /* 指定最终位置,100%等同于to*/ } /* Safari and Chrome */ @-webkit-keyframes carAnimation { 0% {left:-400px; } 100% {left:1600px; } } /* Firefox */ @-moz-keyframes carAnimation { 0% {left:-400; } 100% {left:1600px; } } /*IE暂不支持,此处定义是为了向后兼容IE10*/ @-ms-keyframes carAnimation { 0% {left:-400px; } 100%{left:1600px; } } @keyframes tyreAnimation { 0% {transform: rotate(0); } 100% {transform: rotate(1800deg); } } @-webkit-keyframes tyreAnimation { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(1800deg); } } @-moz-keyframes tyreAnimation { 0% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(1800deg); } } @-ms-keyframes tyreAnimation { 0% { -ms-transform: rotate(0); } 100% { -ms-transform: rotate(1800deg); } } #container { position:relative; width:100%; height:600px; overflow:hidden; /*这个很重要*/ } #car { position:absolute; /*汽车在容器中采用绝对定位*/ width:400px; height:210px; /*汽车的总高度，包括轮胎和底盘*/ z-index:1; /*让汽车在背景的上方*/ top:300px; /*距顶端的距离(y轴)*/ left:50px; /*距左侧的距离(x轴)*/ /*以下内容赋予该元素预先定义的动画及相关属性*/ -webkit-animation-name:carAnimation; /*名称*/ -webkit-animation-duration:10s; /*持续时间*/ -webkit-animation-iteration-count:infinite; /*迭代次数-无限次*/ -webkit-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ -moz-animation-name:carAnimation; /*名称*/ -moz-animation-duration:10s; /*持续时间*/ -moz-animation-iteration-count:infinite; /*迭代次数-无限次*/ -moz-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ -ms-animation-name:carAnimation; /*名称*/ -ms-animation-duration:10s; /*持续时间*/ -ms-animation-iteration-count:infinite; /*迭代次数-无限次*/ -ms-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ animation-name:carAnimation; /*名称*/ animation-duration:10s; /*持续时间*/ animation-iteration-count:infinite; /*迭代次数-无限次*/ animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ } /*车身*/ #chassis { position:absolute; width:400px; height:130px; background:#FF9900; border: 2px solid #FF6600; } /*轮胎*/ .tire { z-index:1; /*同上，轮胎也应置于背景的上方*/ position:absolute; bottom:0; border-radius:60px; /*圆半径*/ height:120px; /* 2*radius=height */ width:120px; /* 2*radius=width */ background:#0099FF; /*填充色*/ border:1px solid #3300FF; -webkit-animation-name:tyreAnimation; -webkit-animation-duration:10s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -moz-animation-name:tyreAnimation; -moz-animation-duration:10s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; -ms-animation-name:tyreAnimation; -ms-animation-duration:10s; -ms-animation-iteration-count:infinite; -ms-animation-timing-function:linear; animation-name:tyreAnimation; animation-duration:10s; animation-iteration-count:infinite; animation-timing-function:linear; } #fronttire { right:20px; /*设置右边的轮胎距离边缘的距离为20*/ } #backtire { left:20px; /*设置左边的轮胎距离边缘的距离为20*/ } #grass { position:absolute; /*背景绝对定位在容器中*/ width:100%; height:130px; bottom:0; /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */ background:linear-grdaient(bottom,#33CC00,#66FF22); background:-webkit-linear-gradient(bottom,#33CC00,#66FF22); background:-moz-linear-gradient(bottom,#33CC00,#66FF22); background:-ms-linear-gradient(bottom,#33CC00,#66FF22); } .hr,.vr { position:absolute; background:#3300FF; } .hr { height:1px; width:100%; /*轮胎的水平线*/ left:0; top:60px; } .vr { width:1px; height:100%; /*轮胎的垂直线*/ left:60px; top:0; }3.JQuery与CSS3 这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言） HTML代码（可以看到与CSS3中的HTML代码并无不同）：
代码如下:<html> <head> <meta charset=”UTF-8″ /> <title>Animations in HTML5 using CSS3 animations</title> </head> <body> <div id=”container”> <div id=”car”> <div id=”chassis”></div> <div id=”backtire” class=”tire”> <div class=”hr”></div> <div class=”vr”></div> </div> <div id=”fronttire” class=”tire”> <div class=”hr”></div> <div class=”vr”></div> </div> </div> <div id=”grass”></div> </div> <footer></footer> </body> </html> CSS: <style> body { padding:0; margin:0; } #container { position:relative; width:100%; height:600px; overflow:hidden; /*这个很重要*/ } #car { position:absolute; /*汽车在容器中采用绝对定位*/ width:400px; height:210px; /*汽车的总高度，包括轮胎和底盘*/ z-index:1; /*让汽车在背景的上方*/ top:300px; /*距顶端的距离(y轴)*/ left:50px; /*距左侧的距离(x轴)*/ } /*车身*/ #chassis { position:absolute; width:400px; height:130px; background:#FF9900; border: 2px solid #FF6600; } /*轮胎*/ .tire { z-index:1; /*同上，轮胎也应置于背景的上方*/ position:absolute; bottom:0; border-radius:60px; /*圆半径*/ height:120px; /* 2*radius=height */ width:120px; /* 2*radius=width */ background:#0099FF; /*填充色*/ border:1px solid #3300FF; -o-transform:rotate(0deg); /*旋转(单位：度)*/ -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); } #fronttire { right:20px; /*设置右边的轮胎距离边缘的距离为20*/ } #backtire { left:20px; /*设置左边的轮胎距离边缘的距离为20*/ } #grass { position:absolute; /*背景绝对定位在容器中*/ width:100%; height:130px; bottom:0; /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */ background:linear-grdaient(bottom,#33CC00,#66FF22); background:-webkit-linear-gradient(bottom,#33CC00,#66FF22); background:-moz-linear-gradient(bottom,#33CC00,#66FF22); background:-ms-linear-gradient(bottom,#33CC00,#66FF22); } .hr,.vr { position:absolute; background:#3300FF; } .hr { height:1px; width:100%; /*水平线*/ left:0; top:60px; } .vr { width:1px; height:100%; /*垂直线*/ left:60px; top:0; } </style>JS代码： 首先引入在线API：
代码如下:<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>实现动画代码（相当简洁）：
代码如下:<script> $(function(){ var rot=0; var prefix=$(‘.tire’).css(‘-o-transform’)?’-o-transform’:($(‘.tire’).css(‘-ms-transform’)?’-ms-transform’:($(‘.tire’).css(‘-moz-transform’)?’-moz-transform’:($(‘.tire’).css(‘-webkit-transform’)?’-webkit-transform’:’transform’))); var origin={ /*设置大家的起始点*/ left:-400 }; var animation={ /*该动画由jQuery执行*/ left:1600 /*设置大家将移动到的最终位置*/ }; var rotate=function(){ /*该方法将被旋转的轮子调用*/ rot+=2; $(‘.tire’).css(prefix,’rotate(‘+rot+’deg)’); }; var options={ /*将要被jQuery使用的参数*/ easing:’linear’, /*指定速度，此处只是线性，即为匀速*/ duration:10000, /*指定动画持续时间*/ complete:function(){ $(‘#car’).css(origin).animate(animation,options); }, step:rotate }; options.complete(); }); </script>css教材，css 内容靠右，html与css文献，css伪元素画箭头，css 对对象进行定位，css怎么裁剪图片为圆，css 图片 中心对齐
PS快捷健大全有哪些？
之所以有快捷键，就是为了能够方便大家使用，提高大家的工作效率。今天的丝路教程就是将常用的快捷键总结在一起，方便大家的记忆，希望能帮助到大家。
一、常用的热键组合
1、图层混合模式快捷键：正常(Shift + Option + N)，正片叠底(Shift + Option + M)，滤色(Shift + Option + S)，叠加(Shift + Option + O)，柔光(Shift + Option + F)，饱和度(Shift + Option + T)，颜色(Shift + Option + C)，明度(Shift + Option + Y)。
2、混合模式循环热键(Shift + – /+)：该组快捷键方便你在整套混合模式的选取中循环选取而不需要单独点击。
3、不透明度调整快捷键：在输入框中输入1-10代表不透明度从10%-100%的变化。同时快速地输入任意两位数，可以实现当下数值的不透明度。例如快速输入59，则不透明度就是59%。
4、填充不透明度快捷键：按住shift键快速键入1-10分别代表10%-100%，与上面的一样，快速输入任意两位数将直接呈现该数字的效果。
5、前景色和背景色快速转换按键：X。该按键可以直接转换前景色和背景色。
6、设置默认的背景色和前景色：D。该按键直接还原软件默认的前景色与背景色。
7、调整画笔快捷键：括号建[或]改变画笔大小，按住shift同时按下括号建调整笔刷硬度。
8、显示/隐藏标尺网格和辅助线：辅助线(Command + ; )，网格(Command + ‘ )。
9、快速编辑色相/饱和度(Option + Command + U)，色阶(Option + Command + L)，曲线(Option + Command + M)。
10、 shift+增加任何数量：其实在很多涉及数值调整的选项中，按下shift+ +/-可以上下调整数值。
二、自定义必备快捷键
自定义快捷键有时候是很有用的，可以通过编辑→键盘快捷键或者Shift + Option + Command + K调出自定义面板。
11、水平和垂直翻转：可以绑定水平翻转为Shift + Command + H，垂直翻转为Shift + Command + J(为什么是J不是V?因为V给人的直接感觉就是粘贴所以不用它)。
12、转换点工具：这是一个非常实用的工具。在类似的软件AI里面也有这么一个工具，快捷键是C，为了多平台好记一点，这里也可以设置为C，但是呢ps里面默认的C是裁剪工具，没事，设置好，然后继续往下读。
13、编辑→剪切：剪切工具是一个非常重要的工具。但是可以想象一下简单地选择一个选区，然后直接裁剪是多么爽快的行动啊。哪怕只是一个ps爱好者这招耍起来也是极其酷的!所以设置一下快捷键吧：Shift + Option + Command + C编辑之。
三、Photoshop文字处理器
谁会知道ps居然可以是这么一个完美的文字处理工具呢!
14、选中字体，然后全部大写：Command + Shift + K，下划线(command+shift+U)。
15、加粗(Command + Shift + B)，斜体(command+shift+I)。
16、字段选择：向上/下选择(Option + 上/下箭头/右选择(Option +左/右箭头)。
17、添加段落空间。在段落窗口里面你可以自己设置各种距离。
18、划分段落：Command +enter。
19、快速选择字体。选中需要编辑的文本，在字体选择选择框里面随便选中一种字体，然后按向上/下箭头可快速切换字体库中的字体，界面中可实时预览效果。
四、图层，蒙版，样式
这些是ps的核心。
20、合并图层/图层组(Command + E)。快速合并选中的图层组。
21、盖印图层(Shift + Option + Command + E)快速创建下面所有图层的一个合并图层。
22、图层编组(Command + G)。
23、链接图层：如果你不喜欢图层编组，那么要在图层之间创建相似的链接关系时可以选中需要链接的图层，然后右击鼠标→链接图层就ok了。所有参与链接的图层不必是相邻的。这样子你很容易可以创建图层与文本图层的链接关系。
24、快速选中多个图层：激活选择工具，按下Shift + Option + Command键，左击然后再画布中绘制包含这几个预选图层(该选区是矩形选框)。
25、快速显示/隐藏被选图层的可见性：当你选中预选图层后需要显示/隐藏这些图层的可见性时，你可以鼠标左击图层左边的眼睛按钮，快速向上/下移动鼠标，你还可以快速显示/隐藏被选图层的可见性。
26、在一个给定的像素值里面看到所有相应的图层。在画布上任意位置右击鼠标，会弹出所有在该像素点上的对应的图层。你可以通过这个方法快速选中一个图层。
27、选中整个图层作为选区：按下Command键，然后鼠标左击对应的图层框就可以了。需要同时选中多个图层选区时，就同时按住shift键。
28、临时取消图层蒙版可见性：按住shift键鼠标左击需要临时取消图层蒙版可见性的蒙版。
29、shift+直接选择工具+鼠标左击创建选框：首先选中直接选择工具，然后按住shift键，接着在画布中创建选区，该选区是矩形选框。
30、图层间选择变换(Option + [ / ])：该组合允许随意选中需要的图层，而无需鼠标频繁左击选中需要的图层。
31、快速移动被选图层到所有图层的顶部/底部(Shift + Command + [ (底部)/] (顶端))。
五、切换面板
32、按下F可快速切换软件工作区的面积。三次巡回。包括基本面板、扩大化面板和全屏视图面板。
33、空格键+鼠标移动面板：这可是最基本的技巧!
34、扩大/缩小画布(option+鼠标滚轮)：快速放大缩小画布的不二选择。
35、实际像素(command+1)，适应屏幕(command+0)。
36、Window(窗口) > Arrange(排列) > New Window for “Your PSD”(为你的psd文件创建新窗口)，可在同一工作区里面大小显示两个你的PSD。你可以把新增的窗口缩小，画布也缩小到适应的大小，然后在大图中修改细节，在小图中浏览整体效果。
六、Option键的选项技巧
37、快速创建剪贴蒙版：按住Option然后鼠标左击两图层之间的连线。
38、复制粘贴图层样式：按住Option然后拖动样式标志fx到需要应用该样式的图层上即可。
39、快速复制粘贴图层蒙版：按住Option然后拖动蒙版到需要应用该蒙版的图层上即可(也可应用于编组)。
40、快速解锁已加锁的背景图层：按住Option然后双击加锁的背景图层，瞬间解锁。
41、快速使用吸管工具：如果你正在使用画笔/修复工具，直接按下Option即可变成吸管工具，放开Option又还原到画笔工具/修复工具。
七、扩展
42、存储为web所用格式：Shift + Option + Command + S。
43、关掉psd(Command + W)：这个适用于你一时间打开多个psd然后需要快速关闭部分psd文件。如果你担心一时间关闭掉本来不想关闭的psd却忘记了保存，那为何不设置几个热键呢?例如S (保存), C (取消) 或者 D (不保存)?
44、添加/减去选区：当你选定了一个选区但需要修改时，可以按住shift(增加选区)和Option(减去选区)。
45、HUD拾色器：在工作中按下Control + Option + Command然后点击画布即可获取拾色器。你也可以在传统的拾色器里面设置默认的颜色。
46、使用智能对象:智能对象在ps里面是极好的一个东西。偶通常直接右击图层→转换为智能对象来获取之。
47、智能滤镜：如果你喜欢滤镜，那么智能滤镜你一定不会错过。很多效果叠加在一起，关键是它们可以通过点击相应样式前面的眼睛来查看效果。
48、保存样式/纹理：很多时候一些样式其实是你经常使用到的，为何不直接保存下来呢?在样式面板里面有一个新建样式的按钮，点击之就可以保存当下样式了。后期需要修改的话可以通过编辑→预设→预设管理器来修改之。
49、快照和图层组合：不要再为了预览一个效果而频繁搬动图层组了，可以在历史操作中创建图层快照，你随时都可以切换回psd状态。
50、对齐像素：当你在使用路径或形状图层时，像素对齐是很重要的。这个时候切忌不要使用+号来改变图层本身的大小，不然很容易使形状/路径跳到对齐像素的中间而不是边缘。
什么是h5页面？
想做H5页面，首先大家先来了解一下是什么H5？
通俗的来说，H5是一个网页，就像一个很大的容器，里面可以放文本、图片、音视频等基本的流媒体格式的文件。
既然H5是作为一种广告形式的载体，那么它就可以应用于不同的应用场景，大家在微信里都收到过结婚请柬吧？ 那个就是H5页面制作的了。
上面说到H5的应用场景非常多，比如：邀请函、 招聘 、品牌推广、 产品宣传、 婚礼庆典 、活动营销 、节日主题、 数据报告、 微杂志 、微官网、 年会等等。
创意的形式也是不同多样包含：视频H5 、一镜到底、 全景VR、 快闪、 答题测试 、合成海报、 游戏、 拟态类、 数据表单 、横屏H5、 长页面等等都可以利用H5做到。
那么大家应该怎么制作H5呢？或者应该怎么正确的选择H5制作工具呢？现在市面上有很多制作H5的网站，也有很多模板可以免费套用，但是有些免费模板可选范围小，需要更多创意选择需要开会员或者单独购买单一模板，下面给大家推荐几个常用免费模板较多的网站。
人人秀
推荐指数：★★★★★
rrxiu.cc/home2?WLF=2022zh324
人人秀是一款免费的H5页面制作工具，据称有10万+的免费模板，也是几个软件里相对来说，免费模板最多的了。可以制作H5页面、H5游戏、微信活动、投票活动、邀请函、人人秀贺卡、微页、微场景等H5活动。
有1000个专业的设计师入驻，每天都会更新大量免费的H5模板、海报、表格等。操作比较简单，点击模板套用填入自己需要的信息即可。
人人秀除了能够制作简单的H5页面以外，还支持各种各样的互动插件，比如创建微信红包、抽奖活动、口令红包、转盘抽奖、投票、活动报名、VR、H5游戏等等。
Jimdo
推荐指数：★★★★☆
是一款德国的在线网页自助建站平台，在全球12个国家拥有超过1000万用户。
用户可在不懂任何网页制作方面知识的情况下轻松制作出漂亮的网页。同时除固定模板外，Jimdo允许用户使用自定义代码和widget外部插件接入。
Wix
推荐指数：★★★★☆
Wix基于HTML 5技术的建站工具，向用户提供多种网页模板，操作非常简便，智能拖拽便可完成简单的网页建设。
据Wix统计每天有超过45000的新用户加入Wix，每个类目下有上百的HTML5模板可供使用。
Maka
推荐指数：★★★★☆
Maka也是一款优秀的H5页面制作工具，模板丰富多样，在交互效果方面很人性化，该工具有免费版，不过免费版不提供外链等功能。
Google Web Designer
推荐指数：★★★★☆
Google Web Designer是谷歌是专门为设计者打造的的可视化HTML5设计开发工具。
它提供了所见即所得的设计环境，包含设计视图和代码视图，还能制作Banner广告动画，功能丰富且强大。
易企秀
推荐指数：★★★★☆
该应用有多种动态模板，并实现多种动态效果，并且，易企秀拥有IOS移动客户端，可以在手机上进行H5的页面制作工作。
图片来自网络，如有侵权联系侵删