border邊框漸變，如何使用html5與css3完成google涂鴉動畫？
知道如何使用CSS3動畫比知道如何使用<canvas>元素更重要：因為瀏覽器能夠優化那些元素的性能(通常是他們的樣式，比如CSS)，而我們使用canvas自定義畫出來的效果卻不能被優化。原因又在于，瀏覽器使用的硬件主要取決于顯卡的能力。目前，瀏覽器沒有給予我們直接訪問顯卡的權力，比如，每一個繪畫操作都不得不在瀏覽器中先調用某些函數。 1.canvas html代碼：
代碼如下:<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>
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)?？焖俸喜⑦x中的圖層組。
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的頁面制作工作。
圖片來自網絡，如有侵權聯系侵刪